Html 如何将 <footer> 元素粘贴到页面底部（HTML5 和 CSS3）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15976245/
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 stick <footer> element at the bottom of the page (HTML5 and CSS3)?
提问by Joe
When I use position relativewith no content, footer goes up, with absolutewith a lot of content, the footer goes down, and with fixedit is always there.
当我使用没有内容的相对位置时，页脚会上升，绝对有很多内容时，页脚会下降，并且固定它总是在那里。
Is there a easy way to get at the end of the page independently of the content, shrinks and grows with content?
有没有一种简单的方法可以独立于内容到达页面末尾，随着内容缩小和增长？
When there is a lot of content we can see the footer in the first page, and when there is few content we will see at the bottom.
内容多的时候我们可以在第一页看到页脚，内容少的时候我们会看到底部。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
header {
position:fixed;
top:0;
width:100%;
height:40px;
background-color:#333;
padding:20px;
}
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: relative;
}
#main{
padding-top:100px;
text-align:center;
}
</style>
</head>
<body>
<header>
header
</header>
<div id="main">
main
</div>
<footer>
footer
</footer>
</body>
</html>
回答by
For footer change from position: relative;to position:fixed;
对于页脚更改从position: relative;到position:fixed;
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
Example: http://jsfiddle.net/a6RBm/
回答by Victor
Here is an example using css3:
下面是一个使用 css3 的例子：
CSS:
CSS：
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
HTML：
<div id="wrap">
body content....
</div>
<footer class="footer">
footer content....
</footer>
Update
As @Martin pointed, the ′position: relative′ is not mandatory on the .footerelement, the same for clear:both. These properties are only there as an example. So, the minimum css necessary to stick the footer on the bottom should be:
更新
正如@Martin 所指出的，'position: relative' 在.footer元素上不是强制性的，对于clear:both. 这些属性仅作为示例。因此，将页脚粘贴在底部所需的最小 css 应该是：
html, body {
height: 100%;
margin: 0;
}
#wrap {
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
Also, there is an excellent article at css-tricks showing different ways to do this: https://css-tricks.com/couple-takes-sticky-footer/
此外，css-tricks 上有一篇出色的文章展示了执行此操作的不同方法：https: //css-tricks.com/couple-takes-sticky-footer/
回答by Omar
I would use this in HTML 5... Just sayin
我会在 HTML 5 中使用它......只是说
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
回答by Fabrizio Calderan
just set position: fixedto the footer element (instead of relative)
只需设置position: fixed为页脚元素（而不是相对）
Note that you may need to also set a margin-bottomto the mainelement at least equal to the height of the footer element (e.g. margin-bottom: 1.5em;) otherwise, in some circustances, the bottom area of the main content could be partially overlapped by your footer
请注意，您可能还需要margin-bottom将main元素设置为至少等于页脚元素的高度（例如margin-bottom: 1.5em;），否则，在某些情况下，主要内容的底部区域可能会与页脚部分重叠
