Sticky footer with flexbox

First you wanna set the flexbox container on the body. You also wanna make sure it takes up the whole height of the browser window with 100vh.

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

then you need to stretch the main part of the page to fill up the available space in the flexbox container and push down the footer.

.main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;

This example works in a html structure like this

    <div class="main">

Add your comment