时间戳

首页 > 解决方案 > 在 HTML/CSS 中从正文底部删除填充

html - 在 HTML/CSS 中从正文底部删除填充

问题描述

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>

/*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RESET CODE END --------------------------------------------------------------------------------- */


body
{
    display:flex
    ;background-color:#20262b;min-height:100vh;
}

.column
{
    display:flex;
    flex-direction:column;
    padding: 0;
    /* flex:1; */
}

/* .flexContainers{display:flex;} */
#body__
{
    
    background-color:#30364b;
    padding: 0;
}
#body___header
{
    /* display:flex; */
    background-color:#10561b;
}
#body___middleSection
{
    display:flex;
    flex:auto;
    background-color:#30363b;
}

#body___footer
{
    background-color:#10561b;
}


</style>
</head>
<body class="">
<div id="body__" class="column">
<div id="body___header" class="flexContainer"><span class="">This is Header of body</span></div>
<div id="body___middleSection" class="flexContainer"><span class="">This is cntnt of body</span></div>
<div id="body___footer" class="flexContainer"><span class="">This Footer of body</span></div>
</div>
</body>
</html>

这是我的布局

在上面的代码中，您可以注意到“This Footer of body”内容之后的填充。

我不明白这个填充是从哪里来的。

由于这种填充，页面可以稍微垂直滚动（至少在 Firefox 中），除非有额外的内容，否则页面不应该可以滚动。

我怎样才能解决这个问题。

编辑

即使您在此处运行代码段，您也会注意到它可以（垂直）略微滚动，这是不受欢迎的行为。

编辑 2

底部微小空间的颜色与主体标签的颜色相同。所以我假设，它要么是body的底部填充，要么是id为body__的div的底部边距

标签： htmlcssflexbox

解决方案

我解决了

最初我使用的是reset.css

现在我正在使用normalize.css

虽然我仍然不知道是什么导致了这种奇怪的行为

推荐阅读