Is this normal in CSS?

Question

The background of the BODY tag extends to fit the sidebar, but the background of the #wrap element doesn't. Why?

HTML:

<div id="wrap">
    <div id="side"> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> </div>
</div> 

CSS:

body{
    background: #333;    
}

#wrap{
    position: relative;
    background: #cc4;       
}

#side{
    position: absolute;
    top: 0;
    left: 0;
}

#Fiddle

Answer 1

Its due to your #side being absolute.

It's like floating where it thinks the content is empty.

If you remove position absolute off from #side , then it works.

It just thinks the box is empty and so there is nothing to put a background on.

Answer 2

The #wrap element has no content, hence no height, so the background color is not visible.

If you specified a height value, you would see it, for example:

#wrap{
    position: relative;
    background: #cc4;     
    height: 400px;
}

The #side element is absolutely positioned so it does not contribute to the height of the parent container (using absolute position takes the element out of the normal content flow).

You are seeing the expected behavior for the CSS rules that you defined.

Since the body tag is the root level container, it encloses everything, including all floated and absolutely positioned descendant elements, hence, the background color (or image) covers everything.

Answer 3

我认为这是对Side元素的绝对定位。