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 a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from world-class WordPress developers at Codeable. If you’re in Kelowna and need a custom website for your business visit our Kelowna Web Design page now to get started.