html - CSS最小高度不起作用

Question

我有一个 parent#out和一个 child #indiv。父级是绝对定位的，它的最小高度是 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/

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/