Question

I am trying to do the following in a CSS template:

1. Dock the footer to the bottom when there is not enough content to
   fill the page
2. Stretch the header and footer background across the whole width
3. Position all the content in the middle of the page

This is the code I have, created with help on here:
http://tinkerbin.com/lCNs7Upq

My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?

Answer 1

You can fix and element to the footer using CSS:

position: fixed;
bottom: 0;

However, I’m trying to figure out what exactly your trying to do.

You header and footer should automatically go 100% across the page if it’s a div.

Your middle section can be set to height: auto; via css and will fill up the viewport pushing the footer all the way to the bottom, but to do this you also have to set the body to 100% in order to get it to work.

html, body, #content {
    height: 100%;
    min-height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: blue;
    position: fixed;
    top: 0;
}
#content {
    height: auto;
    margin: 100px auto;
    background: green;
}
#footer {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

Your HTML should look somewhat like this:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Working Example: http://jsfiddle.net/s4rT3/1/