Container DIV没有扩展到包含具有绝对定位的DIV

Question

我想有一个简单的解决方案,但它让我望而却步.如果您查看此页面,您将看到只有标题具有灰色背景.灰色背景由#container DIV设置,我想在页面的整个高度向下拉伸:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
}

目前它只是覆盖页面的标题部分,并且下面的内容不包含在其中.我想这是因为#content DIV中的主要内容具有绝对定位,为了能够对这个div的定位做一些动画我需要这些动画(当你将鼠标悬停在导航条图像上时可以看到这一点):

#content {
    font-family: Lucida sans unicode !important;
    color: #CECBBB;
    text-align: justify;
    position: absolute;
    top: 210px;
    padding: 20px 40px;
}

从一些研究来看,似乎具有绝对定位的DIV不包括在父DIV的高度中,但我不确定如何解决这个问题.

我会感激一些帮助.

谢谢,

缺口

Answer 1

你是对的.在父容器的布局中不再考虑具有绝对定位的元素.为了更好地理解它,我建议你阅读A List Apart中的CSS Positioning.

恕我直言,你有很多解决方案:

1. 使用浮动布局,而不是绝对定位布局
2. 硬编码container元素的高度
3. 使用JavaScript始终更新container元素的高度.