The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.

With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.

Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.

And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:

+1 for providing a solution that worked with the OPs original html. However, you make a claim that Fait's basic structure is lacking, and yet provide no reasons why. Also as a note, his basic structure is just that basic. It is just simple enough to allow new web designers to adapt it to any scenario they may need. That being said, I like your solution. Thank you for teaching me something new.
–
Josh MeinSep 3 '12 at 20:08

@JoshMein, I didn't feel it was worth elaborating on what boils down to my personal opinion on Fait's sticky footer structure at the time. His post is what led me to my own version of the sticky footer, which is slightly different from this answer, so I certainly feel that it's deserving of praise. The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.
–
zzzzBovSep 4 '12 at 3:37

I needed to add #main-wrapper *:first-child { margin-top: 0; }, otherwise the page would be too long by the first child's top margin (causing an unnecessary scrollbar on short pages).
–
Florian BruckerSep 3 '14 at 19:16