Question

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 been able to make it work.

Answer 1

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>