Sizing Elements to the Container's Height
Three column layouts are all the rage nowadays. It's a great way to keep your navigation bits accessible and keep the content from getting really wide and looking all cluttered. Sometimes though you want to match the lengths of those columns. Say that you want the navigation bar to go all the way to the bottom of the page. The traditional wisdom is to put 100% height on the navbar, body and html. This works well enough so long as:
- The content of the page is less than the height of the screen. If the content is longer than the screen, the navbar stops at the edge of the screen.
- 100% of the height is what you want. In a layout with a header or footer, the 100% high navbar will force scrolling regardless of the content's length.
What I want is to be able to say, "this element should be the same height as the containing element." I was searching the internet for a method to do this and ran across this statement at quirksmode:
"[I]f you want to make an element as high as the entire page (whatever this height may be) you're out of luck. Although it might seem simple the specs (and the browsers' unthinking conformance) make this completely impossible.
"The spec says: 'If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like
auto.'"
This was pretty daunting. I like quirksmode and there's lots of good information over there. In fact, I gave up when I read that. Fortunately however I have a really bad memory. I was working on a site, ran across the problem and, before I remembered that I couldn't do it, fixed the problem.
As is often the case, the solutions are completely different for IE and CSS compliant browsers. First I will deal with IE: