CSS 绝对：底部不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10733080/
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
absolute:bottom does not work
提问by Thuong Nguyen
I have a css code. why the "bottom: 0" does not work when the "position: relative;" if I give up "position: relative;" to the "bottom" works but "float: left" and "float: right" not in "width: 930px;". sorry my bad english
我有一个 css 代码。为什么“位置：相对；”时“底部：0”不起作用 如果我放弃“位置：相对；” 到“底部”有效，但“浮动：左”和“浮动：右”不在“宽度：930px;”中。对不起，我的英语不好
<style type="text/css">
#main {
position: relative;
width: 930px;
padding:10px;
margin:0 auto;
}
#left {
position:absolute;
left:0;
}
#right {
position:absolute;
right:0;
}
#bottom {
position: absolute;
bottom:0;
}
</style>
<div id="main">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div id="bottom">
Bottom
</div>
</div>
回答by peirix
That's because when you're setting position:relativeon main, then position:absolutewill be relativeto the parent. And your #maindiv has no height, which causes the #bottomto not be at the bottom of the page.
那是因为当您position:relative在 main 上设置时，position:absolute则将相对于父级。并且您的#maindiv 没有高度，这会导致 div#bottom不在页面底部。
回答by Jashwant
This is not the way to go, use floatfor such type of layout.
这不是要走的路，float用于此类布局。
Coming back to your question,
回到你的问题，
bottom:0is working fine but since your main doesnt have height, you are not seeing it,
bottom:0工作正常，但由于你的主要没有高度，你没有看到它，
Do this for #main,
这样做#main，
#main
{
position: relative;
width: 930px;
padding:10px;
margin:0 auto;
height:200px;
}
Edit:
编辑：
You can use,
您可以使用，
#main {
position: relative;
width: 930px;
padding:10px;
margin:0 auto;
}
#left {
position:absolute;
left:0;
top:0;
}
#right {
position:absolute;
right:0;
top:0;
}
#bottom {
left:0;
position: absolute;
bottom:-20px;
}
but I wont recommend this ( I said earlier this layout should not be handled by float)
absolutedoes not account for positionof other elements, so this code will break if #lefthas more height.
但我不会推荐这个（我之前说过这个布局不应该被处理float）
absolute不考虑position其他元素，所以如果#left有更多的高度，这个代码会中断。
If I were you, I would have used this,
如果我是你，我会用这个，
#main {
position: relative;
width: 930px;
padding:10px;
margin:0 auto;
}
#left {
float:left;
}
#right {
float:right;
}
#bottom {
clear:both;
}
