5

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/

3 Answers 3

5

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.

3

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/

2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.