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

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

Answer 1

这似乎是因为您的micro clearfix具有content: "."而导致的。完全停止有一个高度，因为它是一个角色。

将clearfix更改为：

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

在更宽的显示屏上没有发生这种情况的原因是因为您在页脚上设置了min-height: 150px，当列表和语言下拉列表并排时，{150}内的剩余空间足够. 1}}。当它更小并且它们堆叠时，页脚高度超过150px，因此.实际上正在追踪。您可以通过删除min-height进行测试，然后您将在所有屏幕尺寸上出现错误。

<强> Demo

更好的是micro clearfix：

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

.clearfix:after {
  clear: both;
}

身体后出现额外的保证金

1 个答案: