Footer below content, but not floating mid-air if not enough content

Question

I got this code:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

Answer 1

This is the easiest way I have found to make a good footer. Wrap everything but your footer in a "wrapper" div. Then set your html and body height to 100%, with a min-height of 100% on your wrapper. Next, you need to give a bottom margin and bottom padding to this wrapper that is the same height as your footer. It works like a charm.

Demo here

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
footer {
    height: 100px;
}