HTML5 Sticky Footer
Introduction
You may or may not be familiar with this technique but you have most likely seen it in action at some point or another. The sticky footer allows you to create a CSS footer that attaches itself to the bottom of your screen yet is smart enough not to overlap your page content.
Ryan Fait provides a great tutorial for using this method but has unfortunately not updated his tutorial with an HTML5 version. I was planning on updating this for my own personal use but decided to share it on here as well. So here’s the effect in action:
Getting Started
Let’s start off by taking a look at the code.
CSS
<style type="text/css">
* {margin: 0;}
html, body {height: 100%;}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Set footer height. */
}
footer, .push {
height: 100px; /* Set footer height. */
/* clear: both; */ /* Muti-column fix.*/
}
footer {background: blue;}
</style>
HTML5
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>HTML 5 Sticky Footer</title>
<meta charset="UTF-8">
</head>
<body>
<div id="wrap">
<!--Page content here...-->
<div class="push"><!--Sticky Footer Push--></div>
</div>
<footer>
<!--Footer content here...-->
</footer>
</body>
</html>
How it Works
So what is happening here? We have created some basic markup that is split into two main sections, the wrap and the footer. Inside the wrap we have a div with the class of push. Simple enough so far. The magic really happens in the CSS where we set a negative bottom margin that matches the values of our push and footer heights (note: this must include border and padding height as well!).
Final Thoughts
I will warn you to avoid setting a top margin on your footer, instead set the padding using your wrap tag instead. You may also notice that footer works fine without height:auto !important; and height: 100%; As Ryan notes these are added simply as a min-height fix for IE6. If you are not targeting that browser you are free to remove those lines.
