/

How to Stick an Element to the Bottom of the Page with Flexbox

How to Stick an Element to the Bottom of the Page with Flexbox

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:

1
2
3
4
5
6
<html>
 <body class="text-center">
   <p>test</p>
   <p>&copy; 2022</p>
 </body>
</html>

How to stick an element on the bottom of the page with flexbox

Our goal is to stick the “footer” HTML element to the bottom of the page using Flexbox. Here’s how we can achieve that:

  1. Apply Flexbox to the page body: Add the flex and flex-col classes to the <body> element.
1
2
3
4
5
6
<html>
 <body class="text-center min-h-screen flex flex-col">
   <p class="flex-grow">test</p>
   <p>&copy; 2022</p>
 </body>
</html>

  1. 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.

  2. 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.

How to stick an element on the bottom of the page with flexbox

Tags: CSS, Flexbox, Web Development