my child div is not inheriting the 100% height

Problem

I am having some issues with setting the child div (contentwrapper) to 100% height, when the parent div (wrapper) is set to 100%.

any ideas why?

the goal of this layout is

100% header fixed LEFT, 100% RIGHT 100% footer (but always on bottom)

any help is appreciated.

thanks,

<form>
<div id="wrapper">
<header>
<div id="header">my header</div>
</header>
<div id="contentwrapper">some other items</div>
<footer>
<div id="footer">my footer</div>
</footer>
</div>
</form>


html, body, form {
border: 0;
margin: 0;
height: 100%;
_height: 100%;
width: 100%;
}

#wrapper {
    background-color: #DDDDDD;
    height: auto !important;
    height: 100%;
    margin: 0;
    min-height: 100%;
    position: relative;
    width: 100%;
}

#header {
    height: 50px;
    background-color: #666;
    width: 100%;
    _width: 100%; /* ie6 */
    z-index: 100;
}

#footer {
    width: 100%;
    background-color: #CCC;
    position: absolute;
    bottom: 0 !important;
    bottom: -1px;
    height: 40px;
    clear: both;
}

#contentwrapper {
    height: 100%;
    min-height: 100%; 
    background-color: Yellow;
}
Problem courtesy of: Rick

Solution

The first thing I want to point out is when styling DIVs or anything with CSS3 a good rule of thumb is to always do it by class so you can assign classes to multiple elements and reuse them to avoid repetitious code. ID's are more for targeting objects and keeping them separate will save headaches if and when you explore into jQuery/ javascript.

What you need to do when making a div 100% height is assign elements html and body to height:100%. Anything inside the body then must have "min-height" set to 100%. Height won't do the trick, it's just one more strange workaround for CSS. It seems you have this down but the repeating height property is conflicting and messing things up.

The problem with your footer not sticking to the bottom of the page is that you have it absolute positioned to the bottom. If you change this to fixed it will stick to the bottom of the browser window. It's 40px, so remember to add 40px of padding to the bottom of the contentwrapper to avoiding covering content

Also, I see you resetting margin/padding in your css. A good tool was a CSS reset style sheet to include in all your pages that Eric Meyer made. You can find it here:

http://meyerweb.com/eric/tools/css/reset/

That will level the playing field for annoying default styles to various properties in all browsers.

Hope I understood your questions and this helped.

Solution courtesy of: wwwroth

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.