n00b News- CSS Only Sticky Footer

By Jason Land

WARNING: INTERNET VERSION 10+ ONLY.

duct-tape-prohibited

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 

 with the main tag when doing Angular UI-Router projects.