Flexbox Sticky Footer

A sticky footer will keep your footers at the bottom of the viewport even if the page content above it is short. This sticky footer uses CSS Flexbox rules to keep the footer at the bottom of the page.

Additional Reading: CSS Tricks: Complete Guide To Flexbox

HTML

The Flexbox Sticky Footer requires a few HTML structural considerations:

  • The <body> tag requires a class of .sfooter
  • All page content above the <footer> must be contained inside <div class="sfooter-content"></div>
  • <div class="sfooter-content"></div> MUST be the immediate child of the <body> tag.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Sample Sticky Footer</title>
  </head>
  <body class="sfooter">

    <div class="sfooter-content">
      <!-- your page content here-->
    </div>

    <footer>
      <!-- footer here-->
    </footer>

  </body>
</html>

CSS - Static Projects

/***
* Flexbox Sticky Footer
* http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
***/

/*corrects IE min-height bug*/
html { display: flex;}
body { width: 100%;}

.sfooter {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sfooter-content {
  flex: 1 0 auto;
}

CSS - Angular Projects

The .sfooter selector requires a minor change in order to be compatible with Angular projects.

/***
* Flexbox Sticky Footer
* http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
***/

/*corrects IE min-height bug*/
html { display: flex;}
body { width: 100%;}

.sfooter > * {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sfooter-content {
  flex: 1 0 auto;
}