Question

我想有一个简单的解决方案，但它让我望而却步。如果您查看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的高度中，但我不知道如何解决这个问题。

我会感激一些帮助。

谢谢，

尼克

Answer 1

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

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

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

Answer 2

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

但是，如果动画是悬停时打开的顶部的子菜单，那么我建议将菜单和内容div设置为position: relative,，而不是设置top #content位置的动画{1}}（正如你的脚本似乎正在做的那样），为菜单的height设置动画（默认为零，动画为45px高[这就是firebug显示高度打开]）。

Answer 3

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

添加margin-top并删除绝对位置将执行此操作。

Answer 4

在这里扩大Cecil的答案。

可以使用边距来定位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;
}

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

4 个答案: