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:
→ Get my Node.js Handbook
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook