If you’ve ever wanted to stick a div to the bottom of a page, regardless of the window size, while still keeping it in the flow of the page, then this guide is for you. In this tutorial, we’ll walk through the process of using Flexbox to achieve this effect.
Let’s start with a simple example using Tailwind CSS:
<html>
<body class="text-center">
<p>test</p>
<p>© 2022</p>
</body>
</html>
Our goal is to stick the “footer” HTML element to the bottom of the page using Flexbox. Here’s how we can achieve that:
- Apply Flexbox to the page body: Add the
flex
andflex-col
classes to the<body>
element.
<html>
<body class="text-center min-h-screen flex flex-col">
<p class="flex-grow">test</p>
<p>© 2022</p>
</body>
</html>
-
Use the
min-h-screen
class to set the minimum height of the body element to the screen height. This ensures that the footer will always be positioned at the bottom of the page, even if the window size is too big. -
Add the
flex-grow
class to the preceding element of the footer. This will make the element grow to occupy the remaining space, pushing the footer to the bottom of the page.
By following these steps, you’ll achieve the desired effect of sticking an element to the bottom of the page using Flexbox.
Tags: CSS, Flexbox, Web Development