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:

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 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/

If you're willing to jump into the HTML5 future, you can use flexbox...

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
   flex: 1;
}

My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Tags:

Css

Sticky Footer

Related