Geek Answers Handbook

CSS min-height not working

I have a parent #out and a child #in div. Parent is absolute positioning, and min-height is 100%. It works, but if I set min-height: 100% for 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 only works in Opera JSfiddle Link: http://jsfiddle.net/TPyKS/

+4
source share
3 answers

Absolute positioned elements are not evaluated in a row with other elements in the DOM. They are considered as their own floating elements. The height / width of the other elements means nothing to them. Thus, you cannot set a percentage of the minimum / minimum width on them. You will need to set the height / width explicitly.

+4
source

Add height: 100%; in #out

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

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

+3
source

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

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

+2
source

More articles:


All Articles