Timothy Koech

Posted on Oct 3, 2019 • Updated on Oct 27, 2019 • Originally published at timkoech.co.ke

Sticky Footer using Tailwind CSS

#tailwindcss #flexbox #css

I started experimenting with Tailwind CSS a couple of months ago and I'm loving it. The idea is to finally use Tailwind CSS on my website.

Normally, I like to have my HTML page layout semantically divided into these sections; header, main and footer.

<body>
  <header>
    Navigation bar
  </header>
  <main>
    Page content
  </main>
  <footer>
    Social links
  </footer>
</body>

To keep the footer section at the bottom of the browser window, we need to add flexbox utility classes provided by Tailwind CSS like this.

<body class="flex flex-col min-h-screen ">
  <header>
    Navigation bar
  </header>
  <main class="flex-grow">
    Page content
  </main>
  <footer>
    Social links
  </footer>
</body>

The utility classes

.flex
This sets the body element into a flex container. All direct children of the body element will become flex-items.
.flex-col
This defines the direction of the flex-items; header, main and footer.
We want the layout of the page to resemble a column where the flex-items are arranged from top to bottom.
By default, flexbox arranges flex-items horizontally in a row from left to right.
.min-h-screen
This class ensures the layout takes up the full height of the browser window.
.flex-grow
Adding this class to main makes it grow, occupying all the available space on the screen. The available space is equal to the size of the flex container, body, minus the sum of the flex-items header and footer.

To stick the footer at the bottom using plain CSS and flexbox.

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1; /* Or flex-grow: 1;*/
}

Resources

A Complete Guide to Flexbox

Tailwind CSS Documentation

Flex-grow - MDN Documentation

Top comments (11)

Ali Havasi • Mar 26 '20 • Edited

Thanks a bunch!

This method works if you want to push your footer to the bottom of the page. But once the content gets taller than the height of the container, the footer will also be pushed down.
Adding fixed bottom-0 w-full utility classes to the footer works, but the problem is I can't get the z-index working properly for some reason. Any idea what I'm doing wrong?

Dustin Wyatt • Aug 15 '21

This is not a sticky footer and yet it's the first Google result for "tailwind sticky footer". 🙄

This is just a regular ole' footer. If the content in main is taller than the screen the footer does not stick to the screen/window bottom.

unohuim • Oct 28 '19

Thanks!

What do you suggest when the top nav menu drop down drops below the footer bar, and when you scroll down to read the rest of the menu drop down, that footer bar gets stuck at the specific place vertically on the screen and doesn't move to the bottom?