容器 DIV 未扩展到包含具有绝对定位的 DIV答案

【问题标题】：Container DIV not expanding to include DIVs with absolute positioning容器 DIV 未扩展到包含具有绝对定位的 DIV
【发布时间】：2018-03-19 12:57:54
【问题描述】：

我想有一个简单的解决方案，但我想不通。如果您查看this page，您会看到只有标题具有灰色背景。灰色背景由#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 的高度中，但我不知道如何解决这个问题。

我将不胜感激。

谢谢，

尼克

【问题讨论】：

标签： css css-position

【解决方案1】：

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

恕我直言，您有很多解决方案：

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

【讨论】：

【解决方案2】：

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

但是，如果动画是悬停时打开的顶部子菜单，那么我建议将菜单和内容 div 都设置为 position: relative,，而不是动画 top 的位置 #content（如您的脚本似乎正在执行），为菜单的height 设置动画（将其设为默认值为零，并设置为 45px 高 [这就是萤火虫显示要打开的高度]）。

【讨论】：

@Nick——看起来你快到了。我现在看到了背景，您似乎正在处理悬停。我想你会得到它的功能如你所愿。
是的，我已经对背景进行了排序，但是使用您的方法，子菜单没有像我希望的那样工作。我想保留一个 slideDown/Up 和一个淡入淡出，但不知道如何做到这一点。你可以看到我关于这个here的问题。

【解决方案3】：

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

添加一个margin-top并删除绝对位置会这样做。

【讨论】：

【解决方案4】：

在这里扩展一下塞西尔的答案。

我们可以用边距定位 div，以确保父母与孩子一起成长。

看看这个小提琴

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

【讨论】：