100% height model css?

100% height model css?

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven’t got it right with background attachment: fixed, neither i got it with absolute position…

I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:


[ Div:wrapper


is there any way to accomplish that the header and footer remain “locked” at the top and bottom of the browser window and only the content scrolls down.

See Here is the proper solution:

html, body {
height: 100%;

body {
any other styles;

#container {
min-height: 100%;
other styles;
* html #container {height: 100%;}/*IE6*/

this way, your page start out 100% but can grow bigger as content demands.

Leave a Reply

Your email address will not be published. Required fields are marked *