n00b News- CSS Only Sticky Footer

Published on: 2016-09-08

Written by: Jason Land

Warning: Internet version 10+ only.

I've started adding a footer to my Origin Code Academy projects that links to my Github, LinkedIn, and webdev website. I'm used to having a sticky footer done for me with what I used to use at work, or having enough content that it doesn't matter. Since our projects are often quite small, I discovered a troubling gap in my skills. So here is all you need to make a sticky footer using only CSS:

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

  main {
    flex: 1 0 auto;

Make sure you have a <main></main> tag somewhere in your HTML. It can even be empty. I wrap my <div ui-view></div> with the main tag when doing Angular UI-Router projects.

Back to the blog

previous post | next post

blog comments powered by Disqus