Html CSS：始终将页脚放在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10316353/
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
CSS: Place footer always at the bottom
提问by bodokaiser
I have following page layout:
我有以下页面布局：
<header></header>
<div id="content"></div>
<aside></aside>
<footer>
<ul>
<li></li>
</ul>
</footer>
Now I want to place the footer exactly in the left corner:
现在我想把页脚正好放在左上角：
text-align: left;
position: fixed;
bottom: 0;
margin: -16px -8px;
Now is the negative margin not the best solution. Are there better ways to positionate a footer directly in the corner?
现在是负利润率不是最好的解决方案。是否有更好的方法将页脚直接定位在角落？
Regards
问候
回答by sandeep
write like this:
像这样写：
text-align: left;
position: fixed;
bottom: 0;
left:0
回答by Obsivus
Check this site Sticky Footer
检查这个网站粘性页脚
Example:
例子：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
回答by user2438788
for me it works like this:
对我来说它是这样工作的：
height: 58px;
position:relative;
bottom: -58px;
Note the same value for heightand bottom. And the postionto relative.
注意相同的值height和bottom。和postion到relative。
回答by Rikin Patel
HTML:
HTML：
<div id="footer"></div>
CSS:
CSS：
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
