此问题有三种解决方案

在以下所有示例中，我只使用了一个非常基本的HTML模板，只使用了三个div：header，content和footer。所有选项都缩小了，但在更高级的网站上应该可以正常使用。

使用背景色

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

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>

使用粘性页脚

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

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>

使用内容的最小高度

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

Answer 2

实现此目的的最简单方法是将min-height设置为页脚上方的内容，如下所示：

HTML：

<body>
    <section>
        This is content of the page
    </section>
    <footer>
        Text of footer
    </footer>
</body>

CSS：

section {
    min-height: 100vh; /* minus the height of the footer */
}

jsfiddle链接：https://jsfiddle.net/x55xh3v7/

但更多“优化”的解决方案是sticky footer techique，它可以防止页脚不必要地流出页面。

Answer 3

也可以这样做

#main{
  border:solid;
  height:100vh;
}
#footer{
  border:solid;
}

<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>

Answer 4

我建议使用javascript来修复此问题，如下所示：

if($(window).height() > $("body").height()){
   $("footer").css("position", "fixed");
} else {
   $("footer").css("position", "static");
}

删除页脚下方的空白区域

4 个答案:

此问题有三种解决方案