CODEWITHSUNDEEP
htmlcss
friction
friction

Reputation: 877

CSS min-height doesn't work

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/

Upvotes: 5

Views: 5478

Answers (3)

Pandian
Pandian

Reputation: 9126

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

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

Upvotes: 2

Gerry
Gerry

Reputation: 146

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.

Upvotes: 5

Idrizi.A
Idrizi.A

Reputation: 12010

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/

Upvotes: 3

Related Questions