Nested div 100% height - searched but couldn't find a solution

HTML & CSS
1

Hello,

I’m having a strange problem with my css…

I’m trying to achieve a 100% height div for multiple nested divs, the goal is to layer a background image of transparent images.

my html looks like this:
<html>
<body id=“subpage”>
<div id=“outer”>

<div id=“white”>
<div id=“footer-city”>
<div id=“top-white”>
<div id=“grid”>
<div id=“wrapper”>
page content here

&lt;/div&gt;&lt;!--wrapper--&gt;

</div><!–grid–>
</div><!–top-white–>
</div><!–city footer–>
</div><!–white–>
<div id=“footer”>
Copyright 2010 by

&lt;/div&gt;&lt;!--footer--&gt;

</div><!–outer–>
</body>
</html>

and the css looks like this:

html, body, #outer, #grid, #footer-city, #top-white, #wrapper, #subpage {
height:inherit;
height:auto;
height:100%;
}

the relevant part at least.

what am I doing wrong? I was sure that setting all the divs to height:100% should fix the issue.

the strange part is that the #white div does extend to 100%, it’s children don’t.

I’d appreciate any help.

here’s a link to this online:

http://idanarbel.com/websites/csshelp/height.html

Idan

2

AFIK you really CANT do it that way.
You see, 100% height is an illusion. You set the container element ( lets say body) to 100%… that is in fact 100% of the height of the view port window. After that you set the direct children of that element to min-height:100%. So the reason why this works is as follows: The body is calculated to be 100% of height of the window. the first child of the body (#outer) is calculated in one two possible ways. If there is not enough content to fill the window outer is 100% the height of the body (#subpage ) if there is more than enough to fill the window then #outer offer flows and pushes out ( the window shows scroll) and thus it appears that there is always 100% height)

what you are doing , by setting everything to a 100%, in a sense, limits #outer and all the other divs to 100% the size of the window. so if there is more content than can fit in the height of the window… the content overflows BUT the container elements #outer, #grid, #footer-city, #top-white, #wrapper, #subpage DON’T STRETCH, to encompass this.

One would think that the answer would be to set the body to height:100% and all children to min-height:100% , but that doesnt work because min-height is calculated from a parents explicit height ( and since you need to set #outer to min-height:100% there is no “height:” set , and thus there is no way for #outer’s children to calculate their min-height:100%s… ( remember if you set “height:” then #outer wont stretch as needed and the illusion will break that way).

in short the real way to achieve 100% height is as follows … but you can only control up 2 levels.

CSS
html ,body { height:100%}
#outer{min:-height:100%}

3

First you should apply a height to html and body tags


html, body {
    height: 100%;
}

Than you need to apply min-height for modern browsers and height for older IE versions:


#outer,  #grid, #footer-city, etc.... {
    min-height: 100%
}
* html#outer,  #grid, #footer-city, etc.... {
    height: 100%
}

Hope this works for you.

4

I see, so I guess it’s not possible…shame, I’ll have to find another way.