删除页脚下方的空白

Question

我的页脚下方总是有一大片空白区域。如何确保页面在页脚末尾结束？

原文由 lagertha281 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题有三种解决方案

在以下所有示例中，我仅使用三个 div 就包含了一个极其基本的 HTML 模板：页眉、内容和页脚。所有选项都被缩小了，但在更高级的网站上应该可以正常工作。

1. 使用背景色

为正文和页脚设置相同的背景色。

 body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
  background-color: red;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  background: gray;
  height: 200px;
}
#footer {
  height: 20px;
  background: red; /*Same as body, you could also use transparent */
  color: white;
}

 <div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>

1. 使用粘性页脚

使用固定在浏览器窗口底部的粘性页脚。 （我不推荐这个选项，因为很多用户不喜欢粘性页脚。但是你可以使用粘性页眉）

 body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  height: 2000px;
}
#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 20px;
  background: #222;
  color: white;
}

 <div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>

1. 对内容使用最小高度

为内容 div 设置一个最小高度，该高度等于浏览器窗口高度减去页眉和页脚的高度。 （这是我个人最喜欢的，因为它可以跨浏览器工作并且在所有屏幕上都能响应）

 body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  min-height: calc(100vh - 40px);
}
#footer {
  height: 20px;
  background: #222;
  color: white;
}

 <div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>

原文由 Berendschot 发布，翻译遵循 CC BY-SA 4.0 许可协议