Published Apr 23 2022
⚠️⚠️ JUST A FEW HOURS LEFT to JOIN THE 2023 BOOTCAMP ⚠️⚠️
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 (
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 an entire book on this topic 👇