100% height div between header and footer

Question

I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).

(See Example for a visual)

The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.

And the Following CSS results in a gap between the content and the footer.

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?

Thank you!

Solution

FIDDLE: http://jsfiddle.net/3R6TZ/2/

Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.

In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.

EDIT

Added a fix and tested down to IE7

UPDATE 2

Alternate method using :before and :after pseudo-elements instead of the spacer divs: http://jsfiddle.net/gBr58/1/

Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean

UPDATE 3 (Sorry for so many updates)

Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...

Comments

[user2339983]

The footer should not ALWAYS be at the bottom of the visible window however (e.g. a fixed footer) it should ONLY sit at the bottom of the screen if there is minimal content, but then adjust to sit below all the content when the content, itself, fills the screen. Basically how CSS Sticky Footer works, only the container around the content must fill the entire height between the header and footer (which is where the complication comes in).

[Dan]

Ah I see. Sounds a bit more complex needing a JS solution.

[user2339983]

Any suggestions on how I could accomplish this with JS/Jquery?

[Dan]

Looks like you might have cracked it!