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

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.

Answer 2

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 3

Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.

Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.

Let's start with the divs I created:

<div id="full_background">
    <img src="images/bkg_main.jpg" alt="" />
    <div id="absolute">Contains background set to repeat-y</div>
    <div id="content">Contains the content</div>
</div>

the css looks like this:

* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }

#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }

#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }

#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }

First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc

Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.

Then below this div you put the div with your content, which freely expands downwards beyond the browser window.

Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them. This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.

I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.