CSS min-height doesn't work

Question

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.

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/

Answer 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.

Answer 2

Add height: 100%; to #out

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

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