How to make this Header/Content/Footer layout using CSS?

Question

 ______________________
|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                        


        

Answer 1

Here is how to to that:

The header and footer are 30px height.

The footer is stuck to the bottom of the page.

HTML:

CSS:

#header {
    height: 30px;
}
#footer {
    height: 30px;
    position: absolute;
    bottom: 0;
}
body {
    height: 100%;
    margin-bottom: 30px;
}

Try it on jsfiddle: http://jsfiddle.net/Usbuw/