Sticky Footer Using CSS

If a page’s content is shorter than the height of the browser, the page may display a big, undesirable gap between the bottom of the viewport and the footer. In the markup, add a new <div> that wraps the header and main container elements.

<div class="wrap">
  <div class="main-header">
    <div class="container">
      …
    </div>
  </div>

  <div class="container">
    …
  </div>
</div> <!-- /.wrap -->

Use calc() to write a mathematical expression that will subtract the footer height from the viewport’s total height.

.wrap {
  min-height: calc(100vh - 89px);
}