Creating a Sticky Footer for your Site

I was messing around with the WordPress admin and I somehow managed to break the footer. This made me pay a bit more attention to how it actually worked, and I realized that it used a pretty awesome CSS trick to make sure that no matter what size your browser window was, it stuck to the bottom, unless of course your page was longer. But this is a pretty cool effect and I managed to get it working in my Support Forum so I thought I would share it.
Here is exactly how the HTML looks in the WordPress admin when it is broken down to its base components:

Here is the CSS that makes the footer sticky:

html, body {
  height: 100%;
}
#wpwrap {
  height: auto;
  min-height: 100%;
  width: 100%;
}
#wpcontent {
    height: 100%;
    padding-bottom: 50px;
}
#footer {
  margin-top: -50px;
  height: 50px;
}

Now your footer is forced to always stay “stuck” at the bottom of the browser window. Just make sure that the padding at the bottom of the main content (#wpcontent) is the same as the height and the negative top margin of the footer (#footer).
This technique works in Firefox, Safari, Chrome and IE.