David Grzyb

Jun 02, 2020

Pushing a Fixed Footer to the Bottom of a Page with Tailwind

Since I started using TailwindCSS for my projects (including this blog), I've quickly picked up a bunch of neat tricks to quickly build layouts I previously would have trouble building. One of these tricks is using .flex-grow to push a fixed footer to the bottom of an otherwise empty page.

Creating layouts and then realizing that when content wasn't long enough, the footer would not be at the bottom of the browser window became really annoying. I couldn't find a blog post detailing this properly, so here it is!

A Working Example

Here is a very simple, working demo of a footer that will stay at the bottom of the browser window. A detailed explanation of why this works is below.

See the Pen wvMvNxR by David Grzyb (@davidgrzyb) on CodePen.

How Does this Work?

The above example works by setting the wrapper div to be the height of the viewport. This allows the content section (the <main> block) to grow and fill the available space vertically.

.h-screen => height: 100vh;

Since 1vh is equivalent to 1% of the viewport's height, using .h-screen sets the height to 100% of the viewport's height. But what happens if the content block is larger than what can fit on the viewport? In this case, the user will be able to scroll down and the footer will be at the bottom as they'd expect it to be. Check out the example below to see for yourself!

In my examples I used .flex-col to force the elements within the wrapper div to stack vertically. If I hadn't used this property, the <main> element would still fill up all of the space it could, but horizontally.

What is flex-grow?

The flex-grow property is part of the flexbox module, and allows a flex item (in this case out <main> element) to grow if necessary or possible. The property accepts a value that is the proportion of the space it can take up, but for this example just using .flex-grow does the trick. To read up on flex-grow, here is a great resource by CSS-Tricks.

.flex-grow => flex-grow: 1;

Using Tailwind's .flex-grow property simply sets the flex-grow property to 1. This is enough to force the content element to take up the space available on the screen if there is not enough content to fill the entire viewport height.

There it is! I recommend creating a simple page (or using the CodePen's above) to remove and add different classes and see what the effects are - it's the best way to get a hang of Tailwind!