Why is 100% height not 100% of the browser height?

Question

EDIT:Removed the files from the server

http://www.jdxsolutions.com/newsite/index.html
http://www.jdxsolutions.com/newsite/default.css

This is a layout I've been using to try out some stuff. What's got me stumped is that when the browser is resized so a vertical scroll-bar appears, the background doesn't reach the full height of the browser window... in fact they are shorter than the content panel, despite being set as height:100%.

This happens in IE8, FF3 and Chrome so it's clearly a pretty standard-compliant screw-up (passes validation for XHTML 1.0 strict and CSS2.1+)! Can anyone point out the obvious mistake?

EDIT: I looked at it in Firebug as suggested. What I find is the page div sticks out past the bottom of the parent pageOutline div. How can that work?

Answer 1

body { height: 100%; }

this is the height of the browser viewport, not the size of your html page.

if you need two background you could create two divs containing the other elements with different background properties

Answer 2

Set the height of your page in the body to an exact number and then 100% for everything else.

Plus, there is no height here:

#page
{
    width: 100%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

For the height to work correctly, every parent element must have a height set (which it appears you have done) - but the page element does not specify a height.

Try using Firebug in Firefox to see what it is reading and if it is inheriting.

Answer 3

You use position:absolute; this takes the element out of ‘normal flow’ which means that the element no longer has an effect on the boxes generated by its containing element.

So any of the childs under #pageOutline will fall outside the ‘normal flow’ -- the only reason why your page ‘works’ when you view it without scroll bar is that in this scenario the height:100% corresponds to the height of the viewport which is at that point larger than -or equal to height of the #pageOutline element.

You might have better luck with display:inline-block; and float properties.