CSS Layout Help - Stretch div to bottom of page

Question

I\'m trying to create a layout with a \'header\' area which contains a logo and some links, and then a content area which needs to extend to the bottom of the page. This is

Answer 1

limitations: header height should be static, with an absolute height.

content height is dynamic.

CSS code:

* {
    padding:0;
    margin:0;
}
html, body {
    height: 100%;
    color: #fff;
}
#header {
    background: red;
    position: absolute;
    z-index:20;
    height: 7em;
    overflow:hidden;
    width:100%;
}
#content {
    background: blue;
    position: absolute;
    top: 0;
    padding-top: 7em;
    min-height: 100%;
    box-sizing: border-box;
}

content stretch all the way to the bottom, even when text is short.

when content's text is longer than our window height - we get the auto scroll

Example: http://jsfiddle.net/fixit/p3B4s/3/