Sticky Footer with CSS (Two Methods)

A common layout technique, commonly called a sticky footer, was challenging to do in the past with older CSS but is now much easier to accomplish with flexbox. This technique requires that the footer for a given page stays at the bottom of the viewport as long as the content is smaller than the viewport height. When the content exceeds the height of the viewport, the footer behaves like a regular footer, getting pushed down and staying below the content.

The HTML will look something like this:

<body>
  <header><h2>Header</h2></header>
  <main>
    <p>Content goes here...</p>
  </main>
  <footer><h2>Sticky Footer</h2></footer>
</body>

Notice this uses the <body> element as the wrapper. If you prefer, you can use an actual wrapper element, but this would require some extra HTML.

The CSS then looks like this:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header, footer {
  flex-shrink: 0;
}

main {
  flex-grow: 1;
}

The key portions of the CSS are the flex-direction, and flex-grow declarations. The flex-shrink declaration is set to zero, but this probably isn’t required in most cases. Below is an interactive demo. Use the buttons to add or remove extra paragraphs to test the ‘stickiness’ of the footer.

It should be noted that this is more or less a ‘conditional’ sticky footer since the footer is only sticky when the content is less than the viewport height. If you want a full sticky footer effect, use position: fixed to set the footer in place. But note that you also have to take into account the area the footer covers by adding some padding to the bottom of the main content area above the footer. Here’s the CSS:

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
}

main {
  padding-bottom: 140px;
}

Demo is below:

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Scroll to Top