CSS最小高度不起作用

Question

我有一個父母#out和一個孩子#in div。父母是絕對定位的，它的最小高度是100％。它可以工作，但是如果我也爲孩子設置最小高度：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/

Answer 1

絕對定位的元素還沒有-符合DOM中的其它元素進行計算。他們被視爲他們自己的浮動元素。其他元素的高度/寬度對他們沒有任何意義。因此，您無法爲它們設置基於百分比的最小高度/最小寬度。您需要明確設置高度/寬度。

Answer 2

添加height: 100%;到#out

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

工作演示：http://jsfiddle.net/enve/TPyKS/1/

Answer 3

的min-height :100% to height :100% on #out變化將工作...

更新小提琴：http://jsfiddle.net/TPyKS/2/