How to stick an element on the bottom of the page with flexbox
Here is how to stick a div to the bottom of the page.
A simple example of how to align a div to the bottom of the page.
I’ve had the problem to stick an element to the bottom of a page in case the window was too big (in height). But still be part of the flow of the page if there was not enough screen size.
Here is a very minimal example I made using Tailwind CSS:
<html>
<body class="text-center">
<p>test</p>
<p>© 2022</p>
</body>
</html>
We want the “footer” HTML element to stick to the bottom using Flexbox.
So we first use Flexbox (flex flex-col), we set the minimum height to the screen (min-h-screen).
Then we add flex-grow to grow the preceding element of the footer:
<html>
<body class="text-center min-h-screen flex flex-col">
<p class="flex-grow">test</p>
<p>© 2022</p>
</body>
</html>
This code generates this result:
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025