html - body 后出现额外的边距

Question

这是 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 像素时，它会在页脚下方创建一个空间，我不知道该怎么做。

Answer 1

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

将 clearfix 更改为:

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

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

Demo

更好的是 micro clearfix:

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

.clearfix:after {
  clear: both;
}