Variable height header with scrollable content area filling remaining viewport area

Question

I've seen versions of this simple problem raised a dozen times here and elsewhere on the web, but I haven't seen a solution that works for me yet so I'm asking it again.

I want a webpage with a variable height full width header (height based on contents). Below that I want a content area that fills the rest of the browser viewport. If the content is larger than the remaining space in the viewport then I want the content area to scroll.

I don't need this to work on IE6. I don't care whether the solution uses CSS, tables or a mixture of the two, just no frames and no Javascript.

For a bonus point fix a variable height footer to the bottom of the page.

Answer 1

This cannot be done with CSS/ tables alone unless you know how big your two containers will be ahead of time.

If you are willing to use a little bit of javascript this will works perfectly.

<style>
body, html
{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section, header
{
    width:100%;
    display:block;
}
section
{
    background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
    document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>