Create A Sticky Footer With CSS

Most websites have a header, a content section and a footer.

A common problem with this layout is that some pages are shorter than others, which means the footer doesn't stay at the bottom of the page. Instead, it rides up ride below the content, and on short pages, it's not a good look.

You might be tempted to set the footer to an absolute or fixed position, but we don't want the footer to be visible at all times if the page is long enough to scroll. We want the footer to get pushed down below the content on those pages.

In this video, I will show you a simple way to achieve this sticky footer behavior with only CSS and no JavaScript.
This technique involves Flexbox, which is supported in all modern browser and Internet Explorer 11. While I don't have older copies of IE handy, this technique should degrade gracefully and stack the footer below the content. It won't be a sticky footer anymore, but it won't be the most broken website they've used that day either.

You can check browser support for Flexbox on Can I Use.