CSS 位置绝对值和底部 0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19612951/
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
Position Absolute and Bottom 0
提问by Harrison Tran
http://cdpn.io/FykHrI seem to have an issue with the combined CSS properties:
http://cdpn.io/FykHr我似乎对组合的 CSS 属性有问题：
position: absolute;
bottom: 0;
First you can see that the .footer div doesn't isn't at the bottom. Now, change the font-sizefrom 120pxto 50pxand the div seems to be working the way I inteded it to.
首先，您可以看到 .footer div 不在底部。现在，改变font-size从120px到50px和DIV似乎是工作我就inteded的方式。
How do I make the .footer div stay at the bottom (not fixed at the bottom of the screen) regardless of the size of the .content div.
无论 .content div 的大小如何，如何让 .footer div 保持在底部（不固定在屏幕底部）。
回答by keirog
You need to add position: relative;to the parent container, which in this case is .wrapper.
您需要添加position: relative;到父容器，在本例中为.wrapper.
Here's a good reference page on absolute positioning.
回答by ?ukasz Pijet
There is one way to do that:
有一种方法可以做到这一点：
body {
height: 100%;
margin: 0;
}
html {
padding-bottom: 50px;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: red;
}
There is still one limitation. You have to know height of footer and set it in two places.
还有一个限制。您必须知道页脚的高度并将其设置在两个位置。
