How to keep your footer at the bottom of the page with Tailwind CSS
Today, we are going to create a footer that stays always on the bottom of your page using only Tailwind CSS.
But,…what kind of footer is this?
This is a technique where the footer is positioned at the bottom of the page, but it’s not fixed or “sticky” - instead, the main content of the page pushes the footer down to the bottom. This ensures the footer is always visible, but it’s not fixed in place like a traditional sticky footer.
Use cases:
- Flexible Layout: By allowing the main content to determine the footer’s position, this approach provides a more flexible layout that can adapt to different content lengths and screen sizes.
- Consistent Footer Placement: Even though the footer isn’t fixed, it will always be positioned at the bottom of the page, providing a consistent user experience.
- Maximized Content Area: Since the footer isn’t fixed, the main content area can use the full height of the viewport, without having to account for a permanently positioned footer.
- Simpler Implementation: Compared to a true sticky footer, this approach is generally easier to implement, as it doesn’t require additional positioning or layout techniques.
- Compatibility: This method works well across a wide range of devices and browsers, as it relies on basic layout and positioning principles rather than more complex sticky footer implementations.
In summary, the “footer pushed by main content” technique provides a simple way to ensure the footer is always visible at the bottom of the page, while allowing the main content to dictate the overall layout and positioning.
Now, let’s get started with the markup
The wrapper
This classes, you should add to the wrapper of your content, I would recommend adding it to the body tag for consistency. The key class here is min-h-screen which sets the minimum height of the element to the height of the viewport. This will push the footer to the bottom of the page.
flex: This is a utility class that sets the element to be a flex container.flex-col: This is a utility class that sets the flex-direction property of the element to column.min-h-screen: This is a utility class that sets the min-height property of the element to the height of the viewport.
<body class="flex flex-col min-h-screen">
<!-- Main content goes here -->
</body>
The main content
This is the key part of the sticky footer. You should add this class to the main content of your page. This will ensure that the footer is always at the bottom of the page. as you can see in the example below the navigation and footer are outside the main tag.
grow: This is a utility class that sets the flex-grow property of the element to 1. ( now is calledgrow) on Tailwind CSS. you don’y need to nameflex-grow.
<!-- Here goes the navigation -->
<main class="grow ...">
<!-- The whole content goes here -->
</main>
<!-- Here goes the footer -->
That is it!
After that you can add your content inside the main tag and the footer will be always at the bottom of the page. You can also add the navigation inside the main tag, but I would recommend to add it outside the main tag.
This is the whole markup for the sticky footer
On the tutorial you will see I used a section tag, because thats how is set up on the site, but you have to use a the body tag.
<body class="flex flex-col min-h-screen">
<main class="max-w-7xl grow px-8 pt-24 mx-auto">
<div>
<div class="max-w-xl mx-auto text-center">
<div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
<h1>Sticky footer</h1>
</div>
</div>
<div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">
<div class="prose prose-sm 2xl:text-lg text-gray-500">
<!-- Your content goes here -->
<p> In the throbbing heart of London's vibrant streets, amidst the colorful tapestry of the 1980s, I drew my first breaths at St Thomas’ Hospital Medical School. An intricate blend of European heritage defines my roots - my father's lineage tracing back to the rolling hills of Italy, while my mother embodies the fiery spirit of Spain. </p>
<!-- More content... -->
<p> Thank you for taking the time to acquaint yourself with my story. I am filled with anticipation for the adventures that lie ahead, eagerly anticipating the ongoing evolution of my projects and personal endeavors. May your day be filled with beauty and inspiration. </p>
<p>Michael Andreuzza</p>
</div>
</div>
</div>
</main>
<!-- Footer starts here -->
<footer class="border-t py-6 px-8 w-full mx-auto max-w-xl text-center space-y-4">
<span class="mx-auto text-2xl">✺</span>
<p class="text-gray-500">I am your Footeer....</p>
</footer>
<!-- Footer ends here -->
</body>
Conclusion
This is a simple sticky footer that demonstrates how to use Tailwind CSS to create a sticky footer with a predefined set of styles.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
