100% of the entire page

[ccdavies]

Hi. I have been looking all over the web and still no answer.

My css currently has this:


html, body {
height: 100%;
}

#content_container {
height: 100%;
}


This works making the div 100% of the browser, but if page is longer than the browser, i.e. scrolling, the div stops.

How can I make the div the height of the full page, not the browser?

Thank you

[chrishirst]

Dunno, do we get anything to look at so we can see why?

[ccdavies]

Good point.

Well I dont have anything online yet, but I do have more information.

I have a div which is set to 100% height of its parent body. This fills the screen until the screen has scroll.

I have a another div which is position:absolute. I want the 100% div to fill the entire page height.

I presume this issue is due to the position:absolute no longer being seen as a child element of the parent div?

How can I get around this?

[chrishirst]

You presume correctly. position: absolute; will NEVER fit to a document length, simply because it is NOT in the document flow. so is not affected by, nor does it affect other elements that are in the flow.

[ccdavies]

I see.

Is there anyway to make the div whatever the page is though. So not to fit around the position:absolute div, but to at least fill the entire background of the page?

I currently have half of the page set at the body background, and this obviously works a treat, but the sidebar, wont span the entire height.

Any ideas? or is it time for me give up on CSS and use jQuery?

[chrishirst]

No javascripts were harmed in the making of that document.