CSS: Header+main divs that size to the browser window

I'm looking for CSS rules to set a simple page layout.

I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,

I want a main content div that completely fills the remainder of the viewport.

There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.

And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)

Seems simple enough, but I've not b开发者_StackOverflow社区een able to make it work.

What about something like this: http://jsfiddle.net/WqCYh/

For the sake of people not wanting to click the link, here's the HTML and CSS:

<style type="text/css">
    #header
    {
        height:100px;
        background-color:red;
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
    }

    #body
    {
        background-color:blue;
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        right:0px;
    }
</style>

<div id="header">
    Header
</div>
<div id="body">
    Body
</div>

Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.

Anyway here is the 100% height code...

CSS

html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }

XHTML

<div id="content">
  <div id="header">
    <h1>Header</h1>
  </div>
  <div id="inner">
    <p>Content</p>
  </div>
</div>