100% height layout

[Casperin]

Hello, first time poster. :)

I am trying to get a layout that stays at 100% height no matter what, and has a fixed height header and footer, and if the content extends further, the containing div itself will scroll.

Using imaginary css it would go something like this:

HTML:

<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">Lorem Ipsum...</div>
<div id="footer">FOOTER</div>
</div>

CSS:

#wrapper {
height:100%;
width:600px;
margin:0 auto; /* ignoring the ie problems for now */
}

#header, #footer {height:20px;}

#content {
height: 100% minus 40px; /* What?! :P */
overflow: auto; /* #content should scroll.. not the page itself */
}

I hope it is clear what I mean.. :)

Any suggestions?

[SuzyUK]

Hi Casperin and Welcome to WebmasterWorld!

it is a clear question and is often asked. You could try a search for "Frames By CSS [google.com]" as well as "100% height with header and footer [google.com]".

However, please note that the solutions in the past were always compensating for older browsers. As of today, not even tables will do this sort of layout, but CSS can do it VERY easily - yippee.. except for the support of IE6 and below, booo...

It's a common layout requirement for applications, like browsers, which require top toolbars and bottom status bars, however it's considered false to force this type of layout for all screen users as perhaps not everyone views a page on a wide/tall PC!

so all those disclaimers out of the way, here's how it could be done according to latest CSS support:
Use absolute positioning for the whole lot, and all four - top/right/bottom/left - co-ordinates for finding the "100% - 40px" content height..

CSS:
html, body {height: 100%; padding: 0; margin: 0;}

#container {position: relative; height: 100%; width: 600px; margin: 0 auto;}

#header, #footer {height: 20px; background: #dad; position: absolute; left: 0; right: 0;}
#header {top: 0;}
#footer {bottom: 0;}

#content {position: absolute; top: 20px; bottom: 20px; left: 0; right: 0; background: #ffc; overflow: auto;}

HTML:
<div id="container">
<div id="header">header</div>
<div id="content">
<p>favourite foo text....</p>
</div>
<div id="footer">footer</div>
</div>

IE6 and below will not recognize the 4x co-ordinate method but you can use a CSS/DHTML expression to run a calculation for it, by putting it into a conditional comment along with the widths (100% of container) the whole picture is just about there ;)

add this for IE6 and below to fill in the blanks (includes the IE center method)..

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {text-align: center;}
#header, #footer, #content {width: 100%;}
#content {
text-align: left;
height: expression(document.body.offsetHeight - 40 + "px");
}
</style>
<![endif]-->

if you read some of the other links around these search terms you will find methods which simulate this, without the IE stuff, by using padding on the content div. In these methods the whole 100% height gets scrolled although the header and footer don't move so they might do for you as well depending on application.

-Suzy

[edited by: SuzyUK at 9:42 pm (utc) on Jan. 20, 2008]

[Casperin]

Thank you! Exactly what I needed.. I found a solution requiring JS, but this certainly beats it.

One question though. You told me to include the 'if' statement for IE 6, but wrote it
<!--[if lt IE 7]>

I assume that should have been "IE 6"

Thanks again :)

Cas

[marcel]

One question though. You told me to include the 'if' statement for IE 6, but wrote it
<!--[if lt IE 7]>

Suzys' code is correct, I made this mistake in the beginning too, read "If Lower Than IE 7"

[Casperin]

Oooh.. pure tactics. :)

Thanks a lot.