Question

我有一个HTML页面，其结构如下所示 -

<html>
  <head>...</head>
  <body>
    <div id="header">...</div>
    <div id="in-body">...</div>
    <div id="footer">...</div>
  </body>
</html>

我的目标是制作#header＆amp; #footer静态顶部＆amp;分别在页面底部，但#footer之后总有一些空格。

我想如果添加height的％div s会给100%，我可以涵盖整个body区域，但即使截至目前我还是＃39; m使用(18 + 75 + 3)% = 96%的{{1}}，height之后仍有一些空格。

这个的CSS是 -

#footer

我已经从Chrome的开发者工具中检查过，在任何地方都没有额外的html { height: 100%; width: 100%; margin: 0; padding: 0; } body { height: 97.9%; margin: 8px 8px 0px 8px; } #header { height: 18%; margin: 0; } #in-body { height: 75%; margin: 0; } #footer { height: 3%; margin: 0; }或margin。

如果我尝试添加padding，则会出现一个滚动条，但仍有剩余空间，这些空间不属于任何元素（来自Chrome开发者工具），甚至不属于{{ 1}}，但它仍然存在。

我已使用100%，因为我只希望所有可见的html都没有溢出。

我已经在IE11，Chrome 50和Firefox 46中对此进行了检查，总体情况相同。

保持body-height: 97.9%隐藏在IE＆amp; Firefox，但不在Chrome中。

造成这种情况的原因是什么？除了使用html-height删除它之外还有其他方法吗？

如果我在任何地方的方法都错了，请随时纠正我。

Here是完整的代码。

感谢。

编辑：我测试了上面提到的代码，每个标签都有不同的bg颜色，并且工作正常。所以，这是我的代码导致麻烦。请帮帮我。

Answer 1

您可以在CSS3中使用calc（）方法，以确保在同时使用％和px时没有区别。

所以你的身体类可以是：

body
{
    height: calc(100% - 8px);
    margin: 8px 8px 0px 8px;
}

如何删除HTML页面底部的这个额外空间？

1 个答案: