CSS 位置：绝对，div下的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8531323/
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, div under div
提问by aptyp
I've 3 divs, each of them has position: absolute.
我有 3 个 div，每个都有position: absolute.
First is header, and its working.
首先是标题，它的工作原理。
Header has constant height, and second div "content" also works.
标题具有恒定的高度，第二个 div“内容”也有效。
Third div is "footer".
第三个 div 是“页脚”。
"Content" has changeable height and when "content" is higher than web-browser window the "footer" is ON "content". I want to "footer" under "content" irrespective of content height.
“内容”具有可变高度，当“内容”高于网络浏览器窗口时，“页脚”为“内容”。无论内容高度如何，我都想在“内容”下“添加页脚”。
My header is 300px height, content has margin-top: 300px. I can't use the same for the footer, because content hasn't got constant height.
我的标题是 300px 高度，内容有margin-top: 300px. 我不能对页脚使用相同的内容，因为内容没有恒定的高度。
I don't want to set one div with position: absolute, and these 3 divs place inside this one.
我不想用 设置一个 div position: absolute，而这 3 个 div 放在这个里面。
div#header{
width: 960px;
height: 200px;
left: 50%;
margin-left: -480px;
position: absolute;
}
div#content{
width: 960px;
border: 1px solid black;
left: 50%;
margin-left: -480px;
position: absolute;
margin-top: 200px;
}
div#footer{
width: 960px;
height: 30px;
left: 50%;
margin-left: -480px;
position: absolute;
bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
clear: both;
}
回答by Scott
You're over positioning.
你定位过度了。
You do not need to position everything absolutely unless there's something you aren't sharing.
您不需要绝对定位所有内容，除非您没有共享某些内容。
回答by Ashwin Krishnamurthy
If you are willing to useposition : relativewhich is a tad better than position : absolutein cases like this, http://jsfiddle.net/vFTXg/1/- Try editing the value of your content's height here and your footer will be automatically adjusted.
如果您愿意使用position : relative比position : absolute这种情况更好的方式，http://jsfiddle.net/vFTXg/1/- 尝试在此处编辑内容高度的值，您的页脚将自动调整。
CSS
CSS
.header {
position : relative;
width : 100%;
height : 90px;
background-color : #000;
}
.content{
position:relative;
width : 100%;
min-height : 200px;
background-color : #f00;
}
.footer{
position:relative;
width : 100%;
height : 50px;
background-color : #0f0;
}
HTML
HTML
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
回答by scessor
In the future browser can calculate. For your example this could be nice to calculate the min-height for the content to set the foorter to the bottom if content height is low and to set the footer after the content if it has a heigh value. E.g.:
将来浏览器可以计算。对于您的示例，如果内容高度较低，则可以计算内容的最小高度以将页脚设置为底部，如果内容具有高度值，则在内容之后设置页脚。例如：
HTML:
HTML：
<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>
CSS:
CSS：
html, body {
height: 100%;
}
.content {
position: relative;
width: 960px;
}
#header {
height: 200px;
}
#content {
border: 1px solid black;
min-height: -moz-calc(100% - 302px);
min-height: -webkit-calc(100% - 302px);
min-height: calc(100% - 302px);
}
#footer {
height: 100px;
}
Unfortunately only firefox and IE9 and higher support calcat the moment, so this is more theoretically. If you want to test it, see this jsfiddle.
If you want to do this with all current browser you need to use javascript.
不幸的是，目前只有 firefox 和 IE9 以及更高的支持calc，所以这更理论上。如果您想测试它，请参阅此jsfiddle。
如果您想使用所有当前浏览器执行此操作，您需要使用 javascript。
回答by yunzen
If you want something to be of constant width and centered try this
如果你想要宽度恒定且居中的东西，试试这个
#footer,
#header,
#footer {
width: 960px;
margin: 0 auto;
}
and forget about
忘记
left: 50%;
margin-left: -480px;
position: absolute;
回答by Jach0
I would recommend using CSS floats
我建议使用 CSS 浮点数
Do something like this:
做这样的事情：
<div id="wrapper">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
<div class="clear"></div>
</div>
Set the site-width on the wrapper and let the other divs have the same width.
在包装器上设置站点宽度，并让其他 div 具有相同的宽度。
Use float:lefton header, content and footer
在页眉、内容和页脚上使用float:left
Set clear:bothon the clear-div.
设置clear:both在 clear-div 上。
Now you can set the height on the elements you want to have a fixed hight - and you don't have to bother with absolute positioning.. If you insist on using positioning, you could just position the wrapper.
现在你可以设置你想要固定高度的元素的高度 - 你不必为绝对定位而烦恼..如果你坚持使用定位，你可以只定位包装器。
