Sticky Footer with Flexbox

You can add the following code to your CSS file in order for the sticky footer to stay on the bottom of the page no matter how little content there is on the page. This footer, however, may be pushed downward when there is a lot of content on the page, so it differs from a fixed footer.

Note that due to the weakness of the flexbox support in Internet Explorer, this may cause issues.

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

main {
  flex: 1 0 auto;
}

Leave a Reply

Your email address will not be published. Required fields are marked *