Sticky Footer Using CSS

When a web 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. Here's how to fix that up using CSS Calc and some HTML.

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);
}

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free