CSS最小高度是行不通的

I have a parent #out, and a child #in div. The parent is absolute positioned, and it's min-height is 100%. It works, but if I set min-height: 100% to the child too, then it has no result.

我有一个父#out和一个子# 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;
}

It works only in Opera JSfiddle link: http://jsfiddle.net/TPyKS/

它只适用于Opera JSfiddle链接:http://jsfiddle.net/TPyKS/。

3 个解决方案

#1

Absolute positioned elements are not computed in-line with other elements in the DOM. They are treated as their own floating elements. The height/width of other elements means nothing to them. Thus, you are not able to set a percentage based min-height/min-width on them. You would need to set the height/width explicitly.

绝对定位元素不与DOM中的其他元素一起计算。它们被视为自己的浮动元素。其他元素的高度/宽度对它们来说毫无意义。因此，您不能对它们设置基于最小高度/最小宽度的百分比。您需要显式地设置高度/宽度。

#2

Add height: 100%; to #out

增加高度:100%;#出

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

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

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

#3

Change of min-height :100% to height :100% on #out will work...

最小高度的变化:100%到高度:100%到#出去工作…

updated fiddle : http://jsfiddle.net/TPyKS/2/

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

#1

#2