CODEWITHSUNDEEP
css
Martijn
Martijn

Reputation: 24789

CSS How to get height between header and footer?

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?

Upvotes: 0

Views: 3557

Answers (2)

rhodesjason
rhodesjason

Reputation: 5014

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.

Upvotes: 0

wildhaber
wildhaber

Reputation: 1661

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 */
       }

Upvotes: 3

Related Questions