100% height for multiple divs

Question

I usually have my structure laid out something like this:

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.

I have tried variations on using the css height/min-height properties:

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 
    min-height:100%;
    height:auto !important;
}

It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears

example

However if I keep the height:auto there then I get the problem of the background for page not working

example

Hopefully someone knows a fix?

Answer 1

Have you tried:

html,
body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#all {
     min-height: 100%;
}

? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).

If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.

My comment on the downvote:

It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.

But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.

Answer 2

Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.

The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.

More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 3

I would just flip the location of your div#all and div#page...

<div id="page">
  <div id="all">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Answer 4

Have you tried this :

function getWindowHeight() {
                var windowHeight = 0;
                if (typeof(window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                        }
                    }
                }
                return windowHeight;
            }


window.onload = init;



 function init(){
 document.getElementByID("all").style.height = getWindowHeight() + "px";

    }   

Or put page instead of all

Answer 5

This worked for me:

#page {
    width: 993px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    /* height:100%;  IE6: treaded as min-height*/
    height: expression(document.body.offsetHeight); /* sets min-height for IE */
    overflow: auto;
    min-height:100%; /* real browsers */
    /* height:auto !important; */
}

Answer 6

Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.

html {
    height:100%;
    background-color: blue;
}
body {
    margin: auto auto;
    padding: 0;
    color: #494949;
    /*min-height: 100%; */
    height:100%; /*for ie6*/
    border-left:solid 2px red;
    border-right:solid 2px red;
    background-color:#fff;
    width: 960px;
}

Answer 7

Well, here's what I ended up with for the CSS:

html, body {
    height:100%; /* IE6: treaded as min-height*/
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    color: #494949;
    text-align: center;
    background-color: #3f91a7;
    background-image: url(images/bg_body.jpg);
    background-repeat: repeat-x;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#all {
    margin: 0px;
    padding: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
    background-image: url(images/bg_all.png);
    background-repeat: repeat-y;
    background-position: center top;
    overflow: hidden;
}
#page {
    width: 993px;
    padding: 0 0 10000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: -10000px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
}
#header, #footer {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}
#content {
    padding: 25px;
}

I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.