绝对定位：一个div在另一个div下面

Question

我有3个div，它们每一个都具有"position: absolute"属性。 第一个是头部，它可以正常工作。头部具有固定的高度，第二个div "content" 也可以正常工作。第三个div是"footer"。当"content"的高度大于浏览器窗口时，"content"的高度会改变，此时"footer"会覆盖在"content"上方。我希望"footer"始终在"content"下面，不管"content"的高度如何变化。我的头部高度为300px，content具有"margin-top: 300px"属性。我不能对footer使用相同的方法，因为content的高度并不固定。我不想设置一个具有"position: absolute"属性的div，然后把这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;
  }

- aptyp

---

请问您能否在问题中添加示例代码？ - andyb

您也可以在这里创建“fiddles”：http://jsfiddle.net/ 以供参考。 - span

Answer 1

您的定位过度了。

除非有什么您没有分享的东西，否则您不需要将所有内容都绝对定位。

JSBin 示例

- Scott

Answer 2

如果你愿意使用position : relative，在这种情况下比position : absolute稍微好一点，http://jsfiddle.net/vFTXg/1/ - 尝试在此处编辑内容高度的值，您的页脚将自动调整。

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

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>

- Ashwin Krishnamurthy

Answer 3

我建议使用CSS浮动。

做类似这样的事情：

<div id="wrapper">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    <div class="clear"></div>
</div>

在包装器上设置站点宽度，让其他div具有相同的宽度。

在标题、内容和页脚上使用float:left

在清除div上设置clear:both。

现在您可以设置要具有固定高度的元素的高度，而无需担心绝对定位。如果您坚持使用定位，您可以将包装器定位。

- Jach0

---

那是我不想使用的，但如果你推荐的话，谢谢。 - aptyp

如果您在 #wrapper 上使用overflow: hidden，则不需要清除div。 - kapa

Answer 4

未来的浏览器可以进行计算。例如，可以很好地计算内容的最小高度，以将页脚设置在底部，如果内容高度较低，则将页脚设置在内容之后，如果它具有较高的值。例如：

HTML：

<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>

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;
}

目前只有 Firefox 和 IE9 及更高版本支持 calc，因此这更多是理论上的。如果您想测试它，请参见此 jsfiddle。
如果要在所有当前浏览器中执行此操作，需要使用 JavaScript。

- scessor

---

我不知道那个。性能方面怎么样？这些一直在计算。 - yunzen

Answer 5

如果你想让某个元素保持固定宽度并居中，可以尝试以下代码：

#footer,
#header,
#footer {
    width: 960px;
    margin: 0 auto;
}

并忘记

left: 50%;
margin-left: -480px;
position: absolute;

- yunzen