programming

n00b News- CSS Only Sticky Footer

Warning: Internet Explorer version 10+ only

I've started adding a footer to my Origin Code Academy projects that links to my Github, LinkedIn, and 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 the bootcamp projects are usually 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 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.