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!
See the Pen Fixed Footer at Bottom with filled Content TailwindCSS by David Grzyb (@davidgrzyb) on CodePen.
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!
Thanks, very helpful!
Thank you very much. I have googled this exact problem numerous times over the past year and never found a good solution. Until now! You rock. Thanks again.
totally what I needed.
Thanks so much! This was the easiest explained tutorial. Really appreciate it!
Hi David,
Thanks for the help. Exactly what I needed.
Thanks for the tip!