容器DIV不会扩展到包括绝对定位的DIV [英] Container DIV not expanding to include DIVs with absolute positioning

问题描述

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

I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:

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

目前，它仅扩展到页面的页眉部分，并且以下内容不包含在其中。我想这是因为#content DIV中的主要内容具有绝对定位，我需要此绝对定位才能在此div的定位上做一些动画（将鼠标悬停在导航栏图像上时可以看到以下内容）：

At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):

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

从某些研究看来，具有绝对定位的DIV不包括在父DIV的高度，但我不确定如何解决此问题。

From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.

我会很感谢您的帮助。

谢谢

尼克

推荐答案

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

If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).

但是，如果动画是悬停时打开的顶部子菜单，则建议将菜单和内容div都设置为 position：relative，，而不是对 #content 的 top 位置进行动画处理（因为您的脚本似乎是），为高度（默认值为零，并设置为高45像素（这是萤火虫显示要打开的高度的动画））。

However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).

这篇关于容器DIV不会扩展到包括绝对定位的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！