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)!

Most Searched Articles

14 of the Best JavaScript Libraries and Frameworks to Try Out in 2020

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

50+ Best Free WordPress Themes for 2020 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than 60+ such themes for you right ...

10+ Best WordPress Hosting Providers of 2020 Compared & Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10 best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for Beginners and Advanced Users Alike

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an eCommerce Business From Scratch (In 10 Steps)

Is 2020 going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...

Scroll to Top