DEV Community 👩‍💻👨‍💻

Cover image for The best way to keep the footer at the bottom of your web page
Amjad Abujamous
Amjad Abujamous

Posted on • Updated on

The best way to keep the footer at the bottom of your web page


Have you ever came across the scenario where the page content is not enough to stick the footer at the bottom? Like so.
Footer Not at the bottom
In this blog post, we will explore the best way to solve this problem.


The code for this blog post can be found here.


The best solution for this problem is to use CSS Flexbox. Flexbox allows you to place your items in a row or a column, and it provides the option for one or more items to span the entire row/column. You can read a full guide at CSS Tricks.

Implementing the solution

Basically, set the display property of the body to flex and set the flex-direction to column. Then, give it two children, a div with the class container (or anything you'd prefer) with the flex-grow property set to 1, and the footer.

The magic here is to then set the min-height property of the body to 100vh allowing the container to span the entire height of the screen's view port, and sticking the footer in the bottom in all cases.
Footer at bottom code


Footer at the bottom


Cover Image.

Top comments (1)

_ronini profile image
Ronnie Villarini

I actually prefer

display: grid;
min-height: 100vh;

on the parent and just align-self: end on the footer, but they both do basically the same thing! Nice tip 😁

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.