Q:

Why does the inner div not expand to the set height/min-height?

Why does height: 100% have no effect on #baz in the following code? How could you fix this when min-height on (some of) the ancestor element(s) is required?
HTML:
<div id="foo">
    <div id="bar">
        <div id="baz">
            foo bar baz
        </div>
    </div>
</div>

CSS:
div { border: 3px solid red; padding: 5px; }
#foo { height: 300px; }
#bar { min-height: 100%; }
#baz { height: 100%; }

See example at http://jsfiddle.net/pmmyP/
Tested with Chrome 12 and Firefox 4.

A:

Using the following kind of works:
#bar { min-height: 100%; position: relative; }
#baz { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

But is there another (or better) way?
Example at http://jsfiddle.net/pmmyP/1/

