Container DIV not expanding to include DIVs with a

问题:

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

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

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.

I'd be grateful for some help.

Thanks,

Nick

回答1:

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).

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]).

回答2:

Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.

IMHO, you have many solutions:

1. Use floated layout, instead of absolute positioned layout
2. Hardcode the height of container element
3. Use JavaScript to always update the height of the container element.

回答3:

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

add a margin-top and remove the position absolute will do this.

回答4:

Expanding a bit on Cecil's answer here.

One can position divs with margins instead, in order to make sure parent grows with child.

Se this fiddle

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

Where the following css is used

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