CSS Sticky Footers with Unknown Height

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Summary:

For a site with a header, content area, and footer:

1. Set html, body {height: 100%;}

2. Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;

3. Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;

   The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.

https://jsfiddle.net/0cx30dqf/