删除页脚下方的空白 [英] Remove white space below footer

问题描述

页脚下方始终有一个空白区域。如何确保页面在页脚末尾结束？

There's always a large empty white space below my footer. How do I ensure that the page ends at the end of the footer?

推荐答案

解决此问题的三种方法

在下面的所有示例中，我仅使用三个div就是一个非常基本的HTML模板：标头，内容和页脚。所有选项均已最小化，但在更高级的网站上应该可以正常工作。

There are three solutions to this problem

In all of the following examples I've just a extremely basic HTML-template by only using three divs: header, content and footer. All the options are minified but should work fine on more advanced websites.

1. 使用背景颜色

1. Using the background-color

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

Set for both the body and footer the same background-color.

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. 使用粘性页脚

1. Using a sticky footer

使用粘性页脚固定在浏览器窗口的底部。 （我不建议您使用此选项，因为许多用户不喜欢粘贴页脚。不过，您可以使用粘贴页眉）

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. 为内容使用最小高度

1. Using a minimum-height for the content

设置内容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>

这篇关于删除页脚下方的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！