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

Answer 1

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