为什么内部div不会扩展到设定高度/最小高度？

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

当您需要min-height时，请勿使用height min-height意味着它不能变小。 height: 100%表示100％父元素的高度（未指定，因此默认为auto我认为）。

#bar, #baz { height: 100%; box-sizing: border-box; }

box-sizing让他们彼此呆在一起。

http://jsfiddle.net/Zweu7/1/

min-height的解释：http://www.dynamicsitesolutions.com/css/height-and-min-height/

Answer 2

使用以下类型的作品：

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

但是还有另一种（或更好的）方式吗？

http://jsfiddle.net/pmmyP/1/

的示例