Html 如何将页脚保持在屏幕底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18739937/
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
How to keep footer at bottom of screen
提问by grabury
What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?
设置网页的最佳实践是什么，以便如果该网页上显示的内容/文本很少，则页脚显示在浏览器窗口的底部而不是网页的一半？
回答by Jezen Thomas
What you're looking for is the CSS Sticky Footer.
您正在寻找的是CSS Sticky Footer。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
/* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -180px;
/* negative value of footer height */
height: 180px;
clear: both;
background-color: red;
}
/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/* thank you Erik J - negate effect of float*/
}<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>回答by Chamara Keragala
You could use position:fixed;to bottom.
你可以使用position:fixed;到bottom。
eg:
例如：
#footer{
position:fixed;
bottom:0;
left:0;
}
回答by Ganesh Pandhere
set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows
设置它的位置：固定和底部：0，以便它始终位于浏览器窗口的底部
回答by Sasidharan
HTML
HTML
<div id="footer"></div>
CSS
CSS
#footer {
position:absolute;
bottom:0;
width:100%;
height:100px;
background:blue;//optional
}
回答by Seth Jeffery
Perhaps the easiest is to use position: absoluteto fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.
也许最简单的方法是使用position: absolute固定到底部，然后使用合适的边距/填充以确保其他文本不会溢出它的顶部。
css:
css：
<style>
body {
margin: 0 0 20px;
}
.footer {
position: absolute;
bottom: 0;
height: 20px;
background: #f0f0f0;
width: 100%;
}
</style>
Here is the html main content.
这是html的主要内容。
<div class="footer"> Here is the footer. </div>
回答by vishal shah
use this style
使用这种风格
min-height:250px;
height:auto;
