CSS Gurus, 100% height nested div in 100% container div?

Status
Not open for further replies.
Fatbat

Fatbat

Advertise Here
May 10, 2008
6,988
149
63
Costa del Sol, Spain
www.linkedin.com
OK, so I've been searching G all day and most of yesterday for an answer to this.

Basically I have set my html and body 100% which establishes height for the first wrapper div which is also set to 100%, and it stretches nicely the the full browser height. What I want to do is now nest another wrapper div inside this one that will also stretch to the height of the browser window and for the life of me I can't figure it out.

Body passes height to first wrapper div, but how can I pass this height from that wrapper to the next div?

There has to be a way to do this, and it's driving me nuts. Any suggestions would be greatly appreciated.
 


Not sure what you're trying to do - you have 4 nested elements, html - body - wrapper1 - wrapper2, each one is set to height:100%. That should make them all have the window height.

Do you have an example, maybe a screenshot or a visualization?
 
Yeah, you wouldn't think it would be so difficult. I also have a sticky footer on the page and ended up switching height for min-height and min-height for height on a couple of CSS classes and it now works across all browsers.

Fucking hell.

Thanks anyway!
 
Lol - take a deep breath. If by sticky footer you mean that the footer has position:fixed, try this to set the outmost wrapper (the first child of body, which holds everything else) to position:relative, and give it a bottom-margin of the height of the fixed footer.

It's hard to know exactly what the problem is without seeing the code though.
 
By sticky footer I mean a footer that sticks to the bottom of the window if the content is too short, but still moves down if the content is long. You usually put a position of relative on it along with the positive and negative padding/margin you mentioned. Search "footer stick alt" on G for the Man In Blue version of the sticky footer. There's a bunch of them but his is my favorite.

The solution to my problem was to put the footer between the outer wrap and inner wrap and to put a height of 100% on the outer wrap and a min-height of 100% on the inner, along with a * hack for IE6 of height 100% I think, though I haven't tested it yet.

Oh man, that was one stupid problem. I'm glad that is over.
 
Not true. You can set a div to 100% of it's parent div as long as the parent's height is defined. As long as the container is 100% then the div inside that can be set to 100%. It cascades down from there. Set the html and body to 100%, then the first div inside that can be set to 100%, and the next div inside that 100%, etc. Try it and see :)

My problem wasn't so much with the 2 divs but the sticky footer placement inside the first div, but outside the second. I had it outside both divs to start with.
 
The sticky footer is a nice trick. I haven't had a case yet where the content was so short that there was the need for one, but you never know. Thanks for the Man in Blue link you mentioned above, by the way :)
 
Status
Not open for further replies.
Top Bottom