position:absolute,div下的div

Question

我有3个div,每个都有position: absolute.

首先是标题,它的工作.

标题具有恒定的高度,第二个div"内容"也有效.

第三个div是"页脚".

"内容"具有可变高度,当"内容"高于网络浏览器窗口时,"页脚"为"内容".无论内容高度如何,我都希望在"内容"下"页脚".

我的标题是300px高度,内容有margin-top: 300px.我不能对页脚使用相同的内容,因为内容没有恒定的高度.

我不想设置一个div position: absolute,这三个div放在这个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;
  }

Answer 1

我建议使用 CSS 浮动

做这样的事情：

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

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

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

在clear-div上设置clear:both 。

现在，您可以设置想要具有固定高度的元素的高度 - 并且不必费心绝对定位。如果您坚持使用定位，则可以只定位包装器。