容器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 元素的高度中，但是我不确定如何解决这个问题。

如果您能提供帮助，我将不胜感激。

谢谢，

Nick

- Nick

Answer 1

是的，你说得对。具有绝对定位的元素不再被考虑在其父容器的布局中。为了更好地理解它，我建议您阅读来自A List Apart的CSS定位。

在我看来，你有很多解决方案：

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

- Saeed Neamati

Answer 2

如果您需要将 #content 绝对定位（如您在问题中所述），则获得所需背景的最佳方法是在 #content 上设置 background-color: #292929 （您可能需要调整一些位置和填充以消除任何黑色）。

然而，如果动画是顶部打开的子菜单，则建议将菜单和内容 div 都设置为 position: relative，并且不要像脚本所显示的那样，使用 #content 的 top 位置进行动画，而是动画菜单的 height（默认为零，并动画到大约 45px 高 [这就是firebug显示的高度]）。

- ScottS

---

@Nick，看起来你已经接近成功了。我现在看到了背景，并且你似乎正在处理悬停效果。我相信你会让它按照你的预期正常运行。 - ScottS

是的，我已经排好了背景，但是使用您的方法子菜单并没有按照我希望的方式工作。我想保留一个slideDown / Up和一个淡入淡出，但是无法弄清楚如何做到这一点。您可以在此处查看我的问题：http://stackoverflow.com/questions/8464707/script-to-animate-height-of-div-is-changing-the-height-of-div-suddenly。 - Nick

Answer 3

稍微扩展一下Cecil的答案。

可以使用边距来定位div，以确保父元素随子元素增长。

请参见此fiddle。

https://jsfiddle.net/944oahmy/10/

以下CSS被使用在哪里

#parent {
  border: 1px solid blue;
  margin-top: -5px;
  margin-left: 10px;
  display: inline-block;
}

#child {
  border: 1px solid red;
  margin-top: 75px;
  margin-left: 150px;
  width: 500px;
}

- Magnus

Answer 4

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

添加一个 margin-top 并移除绝对定位即可实现此效果。

- Cecil Theodore