正文后出现额外边距答案

【问题标题】：Extra margin appears after body正文后出现额外边距
【发布时间】：2014-02-20 06:42:18
【问题描述】：

这里是jsfiddle，我不能发布部分代码，因为它太长了。

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;
}
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;
}

问题是当您将窗口调整为小于 254 像素时，它会在页脚下方创建一个空间，我不明白该怎么做。

【问题讨论】：

在 OS X Chrome 上没有
你试过最小化它吗？
是的。最小高度大约是页脚的大小。
@VladNicula 我在 Windows PC 上尝试了所有流行的浏览器窗口，但问题出在所有浏览器上，在将其最小化后，主体会在它之后创建一个边距。
只是好奇，您为什么要关心低于 254 像素的情况？ AFAIK 大多数浏览器甚至不会缩小那么远。另外，我假设您的意思是宽度，但@Vlad 提到了高度。是哪个？

标签： html css margin padding

【解决方案1】：

这似乎是因为你的 micro clearfix 有content: "."。句号有高度，因为它是一个字符。

将 clearfix 更改为：

.clearfix:after {
  content: " ";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

它不会在更宽的显示器上发生的原因是因为您在页脚设置了min-height: 150px，并且当列表和语言下拉列表并排时，在这 150 像素内有足够的空间留给.。当它更小并且它们堆叠时，页脚高于 150 像素，因此 . 实际上紧随其后。您可以通过删除min-height 来测试这一点，然后您将在所有屏幕尺寸上遇到错误。

Demo

micro clearfix 更好：

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

【讨论】：