Child div 100% height

Question

A more convoluted example of this question is here: child div height of 100% being ignored (a working solution is yet to be found)

Validating test case for my question: http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).

My question is simple, can this be done without

1. Reverting to jQuery (yucky!) or
2. Reverting to tables (yuckier!)

I am yet to find a single example of how this can be done using the CSS layout model.

Thankyou.

EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.

Answer 1

try:

#main { position: absolute; top: 0px; bottom: 0px; }