Height of a container w.r.t children

Problem

We are using CSS3 and HTML5. I am trying to write a page where there will be a div to show some gradient, then comes the header and the header is followed by a container.

This is what I wrote and is working fine until I introduced some dummy lines. Click here to see the sample and this is the code snippet

CSS,

html {
    height: 100%;
}
body {
    margin: 0px;
    height: 100%;
}
.container {
    height: 100%;
}
.oss-gradient {
    height: 5px;
    min-width: 1024px;
    background: yellow;
}
.header {
    height: 40px;
    min-width: 1024px;
    background: #def;
}
.content-wrapper {
    width: 1024px;
    height: calc(100% - 45px);
    background: #defabc;
    margin: 0px auto;
}

My html,

<div class="container">
    <div class="oss-gradient">
    </div>
    <div class="header">
    </div>
    <div class="content-wrapper">
        <!-- some dummy lines here //-->
    </div>
</div>

Then I changed the content-wrapper's height property to min-height. And then it worked fine. It worked fine when when I try to change the zooming levels and my browser window's size. Then I opened firebug and hovered on contianer div, body and html elements. I noticed that content-wrapper element came out of the container div. In other words container, body and html did not expand with the content-wrapper element.

Then I added min-height property for container div thinking that it would expand wrt content-wrapper. Then I zoomed out of the page and found that the content-wrapper is not expanding the available height.

Then I removed height property on html, body and min-height property on the container. Now all three elements expand wrt the child. But when I remove all dummy lines I cant see the content-wrapper div.

How can I fix this?

Problem courtesy of: Krishna Chaitanya

Solution

You need to use min-height for your body element and use background on your html element

Demo (Covering entire page)

Demo 2 (With more content)

body {
    margin: 0px;
    min-height: 100%;
}

You can refer my question here for similar issue.

Solution courtesy of: Mr. Alien

Discussion

There is currently no discussion for this recipe.

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