Most efficient and compatible way to achieve docked footer - html

Question

I am trying to do the following in a CSS template:
Dock the footer to the bottom when there is not enough content to
fill the page
Stretch the header and footer background across the whole width
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/

Answer 2

This is the best example I have seen:
http://css-tricks.com/snippets/css/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
Update: In 2019 using flex is a better option.