使 CSS 页脚位于浏览器窗口的底部或内容的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/616290/
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
Making a CSS footer either sit at the bottom of the browser window or bottom of content
提问by ilivewithian
Duplicate of this question.
重复这个问题。
I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.
我有一个现有的网站（jacquelinewhite.co.uk），上面有一个页脚。目前，此页脚始终位于主要内容下方。我试图让它浮动到浏览器窗口的底部，或者如果内容大于窗口，则停留在内容的底部。
Effectively the HTML is structured like this:
有效的 HTML 结构如下：
<div id="container">
<div id="top_bar">
</div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>
I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.
我尝试了绝对位置，底部 0，它将页脚放在窗口的底部，但如果窗口的内容更大，则页脚覆盖内容。
How should I fix this?
我应该如何解决这个问题？
回答by Chad Birch
This one's always worked well for me: CSS Sticky Footer
这个对我来说总是很好用：CSS Sticky Footer
回答by Josh Stodola
Test drive this...
试驾这...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
回答by Paul Taylor
Assuming you are using footer() element I found just adding this to CSS worked for me
假设您使用的是 footer() 元素，我发现将它添加到 CSS 对我有用
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
