CSS Sticky Footers with Unknown Height

Loyal Tingley picture Loyal Tingley · Dec 3, 2010 · Viewed 22.3k times · Source

Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?

Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.

Answer

Igor Alekseev picture Igor Alekseev · Jan 10, 2012

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/