CSS How to get height between header and footer?

Question

I have a site which always has a height of 100%. The header and the footer always has a fixed height. First some code:

CSS

#header { height: 50px; }
#footer { position: absolute; bottom: 0px; height: 20px; }

HTML

<!-- in the body tag -->
<div id="header">Header</div>
<div id="content-Left"></div>
<div id="content-Right"></div>
<div id="footer"></div>

EDIT: As you can see I have a div content(left and right) between header and footer. I want these divs to fill up all the space between header and footer. The content-left div must always show a right-border from header to footer. How can I do this?

Answer 1

i suggest to solve it like that:

#header {
       position: fixed;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 50px;
       }

#footer {
       position: fixed;
       bottom: 0px;
       left: 0px;
       width: 100%;
       height: 20px;
       }

#content-Left {
       position: fixed;
       top: 50px; /* Close to the Header */
       bottom: 20px; /* Scales the Div down upon the Footer */
       left: 0px; /* Position it to the left */
       width: 50%;
       overflow: auto; /* Makes the Content scrollable if its required */
       border-right: 1px solid #000000;
       /* Border as required - just change size,type and color as you want */
       }

#content-Right {
       position: fixed;
       top: 50px; /* Close to the Header */
       right: 0px; /* Position it to the right */
       bottom: 20px; /* Scales the Div down upon the Footer */
       width: 50%;
       overflow: auto; /* Makes the Content scrollable if its required */
       }

Answer 2

You can use fixed positioning BUT:

• you'll have totally different sizes of your areas depending on screen resp. window size of the user
• you'll have no scrolling, whatever your content does
• it won't work in IE6

There might be some usage cases for fixed positioning, I for my part haven't seen any so far.

In order to avoid layout distortion in different browsers I would solve this with floats. Meaning I would put the left and right divisions into a content_wrapper and then float the two content divisions to the left resp. to the right of the wrapper.

<div header />
<div content wrapper>
    <div left float:left />
    <div right float:right />
</div>
<div footer />

This also enables you to avoid margins on the content divisions and use them on the wrapper if needed.

Answer 3

Fixed footer, without javascript, right?

Wrap everything in <div id="container"></div>. In your CSS:

*, body {margin: 0; padding: 0;} 
#container {display: block; position: absolute; min-height: 100%;} 
#content-Left {border-right: 1px solid #000; } 
#footer {position: absolute; display: block; bottom: 0; height: 3em }

If you have an IE6 stylesheet already, add this:

body, #container {height: 100%;}

If not, create one or else add this to the head of your HTML documents:

<!--[if lt IE 7]> <style>body, #container {height: 100%;}</style> <![endif]-->

Should do the trick.