Question

jsFiddle：https://jsfiddle.net/g334qt1y/2/ 这种情况发生在Firefox，Chrome和IE中。

Javascript库通常会在页面底部插入空节点，例如本例中的iframe。我试图设置它所以它没有任何维度。但是它仍然在页脚后面创建一个空行（白色）。

边距，填充，线高都已经处理完毕。但是我仍然可以在底部看到一条细白线。

要获得赏金资格，我想知道导致此问题的根CSS规则，最好是禁用该规则的一般方法。

HTML：

<header>
    header
</header>
<footer>
    footer
</footer>
<iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>

CSS：

html {
    height: 100%;
}
body {
    min-height: 100%;
}
body, html {
    line-height: 0;
    margin: 0;
    padding: 0;
}
header {
    display: block;
    height: 800px;
    margin: 0;
    background-color: #eeeeee;
    padding: 1em;
}
footer {
    display: block;
    height: 40px;
    margin: 0;
    background-color: blue;
    padding: 1em;
}
iframe {
    height: 0px;
    width: 0px;
    background-color: yellow;
}

Answer 1

~~将iframe设置为display:none，然后删除该空格。~~

以下片段：

＆＃13;
＆＃13;
html { height: 100%; } body { min-height: 100%; } body, html { line-height: 0; margin: 0; padding: 0; } header { display: block; height: 800px; margin: 0; background-color: #eeeeee; padding: 1em; } footer { display: block; height: 40px; margin: 0; background-color: blue; padding: 1em; } iframe { display:none }
＆＃13;
<header> header </header> <footer> footer </footer> <iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>
＆＃13;
＆＃13;
＆＃13;

更新

出于赏金目的（如OP所述），这里有一个解释：

HTML <iframe>元素（或HTML内联框架元素）是内联的元件。因此，请考虑HTML中的空格。

所以解决方案是：

将display:block应用于iframe

＆＃13;

html {
  height: 100%;
}
body {
  min-height: 100%;
}
body,
html {
  line-height: 0;
  margin: 0;
  padding: 0;
}
header {
  display: block;
  height: 800px;
  margin: 0;
  background-color: #eeeeee;
  padding: 1em;
}
footer {
  display: block;
  height: 40px;
  margin: 0;
  background-color: blue;
  padding: 1em;
}
iframe {
  display: block;
}

＆＃13;

<header>
  header
</header>
<footer>
  footer
</footer>
<iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>

＆＃13;

Answer 2

iframe在这里不占用任何空间。您在页脚下看到的空间是由html / body line-height引起的，您可以将其设置为0以摆脱它。

Answer 3

您不需要在页脚类中添加'margin：0'尝试将其替换为'margin-bottom：-5px'，您将能够删除页面底部的空白区域!!您可以参考以下小提琴a link！

footer {
    display: block;
    height: 40px;
    margin-bottom : -5px;
    background-color: blue;
    padding: 1em; 
}

Answer 4

如果您只处理空iframe并假设常规iframe将源设置为URL，并且如果由库设置为节点，则它始终列出源为javascript:void(0)，您可以将其用作属性选择器...

iframe[src="javascript:void(0)"]{
    display: none;
}

虽然这有很多假设。

更新了你的小提琴 HERE

防止空元素占据页面底部的空间

4 个答案:

更新