CSS Sticky Footers with Unknown Height

Question

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 1

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/

Answer 2

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