Html 删除页脚下方的空白区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34188161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove white space below footer
提问by lagertha281
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?
我的页脚下方总是有一个很大的空白区域。如何确保页面在页脚末尾结束？
回答by Berendschot
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.
在以下所有示例中，我只使用了三个 div：页眉、内容和页脚，从而得到了一个极其基本的 HTML 模板。所有选项都被缩小了，但在更高级的网站上应该可以正常工作。
- 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>- Using a sticky footer
- 使用粘性页脚
Use a sticky footer that is fixed at the bottom of the browser window. (I wouldn't recommend this option, because many users don't like sticky footers. You could however use a sticky header)
使用固定在浏览器窗口底部的粘性页脚。（我不推荐这个选项，因为许多用户不喜欢粘性页脚。但是你可以使用粘性页眉）
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>- Using a minimum-height for the content
- 为内容使用最小高度
Set a minimum-height for the content div that equals the browser windows height minus the height of the header and footer. (This is my personal favorite because it works cross-browser and is responsive on all screens)
为内容 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>回答by cuddlecheek
The easiest way to achieve this is to set min-height to the content above footer like this:
实现此目的的最简单方法是将 min-height 设置为页脚上方的内容，如下所示：
HTML:
HTML：
<body>
<section>
This is content of the page
</section>
<footer>
Text of footer
</footer>
</body>
CSS:
CSS：
section {
min-height: 100vh; /* minus the height of the footer */
}
jsfiddle link: https://jsfiddle.net/x55xh3v7/
jsfiddle 链接：https://jsfiddle.net/x55xh3v7/
But more "optimized" solution is the sticky footer techiquewhich prevents the footer from unnecessary flowing out of the page.
但更“优化”的解决方案是粘性页脚技术，它可以防止页脚不必要地流出页面。
回答by repzero
It can be done like this too
也可以这样做
#main{
border:solid;
height:100vh;
}
#footer{
border:solid;
}<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>回答by Ryan
I suggest using javascript to fix this, something like this:
我建议使用 javascript 来解决这个问题，就像这样：
if($(window).height() > $("body").height()){
$("footer").css("position", "fixed");
} else {
$("footer").css("position", "static");
}
