Html 使 div 粘在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39099295/
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
Make div stick to bottom of page
提问by mheonyae
So I made a contact page and I want the footer divto be sticking to the bottom of the page not right after the contact form.
所以我制作了一个联系页面，我希望页脚div在联系表格之后不紧跟在页面底部。
But if I put everything to a container divwith height:100%;and make footer bottom:0;then the page will be "too long", you have to scroll, etc...
但是，如果我把一切都放在一个容器div用height:100%;和化妆页脚bottom:0;那么页面将是“太长”，你必须滚动等...
My cssso far:
我css到目前为止：
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
Footer is just a normal full width divwith some centered text atm.
页脚只是一个普通的全宽，div带有一些居中的文本 atm。
回答by Guy
You can probably use position: fixedto achieve this.
您可能可以使用它position: fixed来实现这一点。
.footer {
position: fixed;
bottom: 0;
}
With this you will need to offset the bottom of the page so would suggest adding a padding-bottomto .mainthat is the height of the footer.
有了这个，你需要以抵消页面的底部，所以建议增加一个padding-bottom到.main是页脚的高度。
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
回答by Mohammad Reza
If you need sticky footer you can make it with 2 solutions.
如果您需要粘性页脚，您可以使用 2 种解决方案。
Solution 1:
解决方案1：
HTML:
HTML：
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS:
CSS：
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
Example: https://jsfiddle.net/ta1amejn/
示例：https: //jsfiddle.net/ta1amejn/
Solution 2 (With table properties):
解决方案 2（带有表属性）：
HTML: Content Footer
HTML：内容页脚
CSS:
CSS：
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
Example: https://jsfiddle.net/zbtaoq1b/
示例：https: //jsfiddle.net/zbtaoq1b/
If you want a fixed footer use this solution:
如果您想要固定页脚，请使用此解决方案：
.footer{
position: fixed;
bottom: 0;
}
回答by stephenmurdoch
Pritesh Gupta's solutionworks really well for me:
Pritesh Gupta 的解决方案对我来说非常有效：
I'm copy+pasting the code in case their site goes down:
我正在复制+粘贴代码，以防他们的网站出现故障：
Here's the HTML:
这是 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
Here's the CSS:
这是CSS：
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
I don't know if it works in old browsers but I'm not so worried about that myself.
我不知道它是否适用于旧浏览器，但我自己并不担心。
It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...
这也取决于您是否知道页脚的高度，但值得指出的是，您不必像上面的代码那样手动设置高度，因为如果您知道垂直填充量，您总是可以弄清楚它是什么和 line-height 内容有...
Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst othertechniques do work this one requires minimal effort.
希望这会有所帮助，在偶然发现这项技术之前，我花了大部分时间尝试网络上的每一个粘性页脚教程，而其他技术确实有效，这需要最少的努力。
回答by nghiepit
You can do that easily with the display: flex.
You don't care about height bodyor wrappertag.
您可以使用display: flex. 你不在乎身高body或wrapper标签。
Example:Please change the height of main tagany value if you want, footeralways sticky to bottom(not position: fixed).
示例：main tag如果需要，请更改任何值的高度，footer始终粘在底部（不是position: fixed）。
https://codepen.io/tronghiep92/pen/dzwRrO
https://codepen.io/tronghiep92/pen/dzwRrO
HTML markup
HTML 标记
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS Solution
CSS 解决方案
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
Or you can:
或者你可以：
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
