css - 为什么内层div没有展开到设置的height/min-height？

Question

为什么 height: 100% 对下面代码中的 #baz 没有影响？当需要(某些)祖先元素上的 min-height 时，您如何解决此问题？

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%; }

请参阅 http://jsfiddle.net/pmmyP/ 中的示例

已使用 Chrome 12 和 Firefox 4 进行测试。

Answer 1

使用以下类型的作品:

#bar { min-height: 100%; position: relative; }
#baz { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

但是还有其他(或更好)的方法吗？

例子在 http://jsfiddle.net/pmmyP/1/