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

Nowadays this can easily be accomplished with position: sticky. See this reference:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the Github issue on W3C CSSWG).

Examine this pen for a working example.