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>&copy; 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>&copy; 2022</p>
</body>
</html>


This code generates this result: