4 Different Ways to Align Footer to Bottom of Page in CSS
Displaying footers at the bottom of a page is a commonly used layout. However, when your site has little content, getting the footer to stick to the bottom of the page might be tricky.
The first solution is to use CSS grid. To push the footer to the bottom of the page, you can add the following styles to your CSS:
grid-template-rows: auto 1fr auto;
Using grid will expand the main element and push the
footer to the bottom of the page. The
height: 100vh ensures that the element takes up 100% of the height of the visible viewport.
To actually align the footer to the bottom, we need to use the
grid-template-rows CSS property. This defines the size of each row. In our case,
auto for the
1fr (fraction) for the
main content, and
auto for the
footer. Notice how the layout changes with and without the
Another possible solution is to use flexbox. In this case, we need to set the
display of the document's body to
flex and set the
We also need to set
flex-grow: 1 on the
main element to allow the main content to take up the remaining space and push down the footer to the bottom of the page.
Notice that we need to set the
100vh again, as well as set the
flex-direction property to
column to display the elements under each other. Take a look at how the layout is ordered with the default
There are two other solutions that are worth mentioning, and one of them is using margins with flexbox. Just as in the previous example, we need to set the same properties for the body:
However, if we set
margin-top: auto on the
footer, we will get the same behavior, except the main content will not take up the remaining space. Take a look at how this differs from the previous example:
Last but not least, we can also use
fixed positioning. In this case, however, the footer will be removed from the default layout order and it will be visible on top of other elements.
Note that we also need to set the
100% to ensure the footer takes up the full width of the page.
So which one should you use? The simplest solution is using grids or flexbox as a second solution. However, in most cases, you may not want to display the entire body of the document as a grid/flexbox layout. In such cases, the second best option would be to go with margins.
If you need to keep the footer floating during scroll, then you will need to use fixed positioning to keep it in the viewport at all times.
Is there anything missing from this tutorial? Let us know in the comments below! Thank you for reading, happy styling! If you would like to learn more about CSS, make sure you check out our CSS category page where we collect all CSS tutorials available on Webtips.
- Access 100+ interactive lessons
- Unlimited access to hundreds of tutorials
- Prepare for technical interviews