CSS的min-height不起作用

Question

我有一个父元素#out，和一个子元素#in。父元素是绝对定位的，它的最小高度是100%。这个方案能够工作，但是如果我给子元素也设置了min-height: 100%，那么就没有效果了。

HTML：

<div id="out"><div id="in">foo<br/>bar</div></div>

CSS：

#out {
    position: absolute;
    min-height: 100%;
    background-color: green;
    width: 100%;
}
#in {
    min-height: 100%;
    background-color: red;
}

它只能在Opera浏览器中工作 JSfiddle链接：http://jsfiddle.net/TPyKS/

- friction

Answer 1

绝对定位的元素不会与DOM中的其他元素一起计算。它们被视为自己的浮动元素。其他元素的高度/宽度对它们没有任何意义。因此，您无法在它们上面设置基于百分比的最小高度/最小宽度。您需要明确设置高度/宽度。

- Gerry

Answer 2

在 #out 上添加 height: 100%;。

#out {
    position: absolute;
    min-height: 100%;
    background-color: green;
    width: 100%;
    height: 100%;
}

Working DEMO: http://jsfiddle.net/enve/TPyKS/1/

- Enve

Answer 3

将 #out 元素的 min-height: 100% 改成 height: 100% 就可以起作用...

更新的代码片段 : http://jsfiddle.net/TPyKS/2/

- Pandian