http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
-
Set
html, body {height: 100%;}
-
Set your body (or a wrapper div) to
display: table; width: 100%; height: 100%;
-
Set your header, footer, and content area to
display: table-row;
. Give your header and footerheight: 1px;
, and give your content areaheight: 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/