Ber*_*hot 19
这个问题有三种解决方案
在以下所有示例中,我只使用了一个非常基本的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>- 很棒的回应。第三种是我的首选方法，只要您只需要支持现代浏览器即可。Modernizr 当然可以检查用户的浏览器是否支持 calc 和 vh。我认为这属于渐进增强的范畴，所以可能不需要某种 JS 后备。 (3认同)
实现此目的的最简单方法是将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/
但更多"优化"的解决方案是粘性页脚技术,它可以防止页脚不必要地流出页面.
它也可以这样做
#main{
border:solid;
height:100vh;
}
#footer{
border:solid;
}<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>- 给身体增加 100vh 修复它！谢谢！ (2认同)