πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
4 Different Ways to Align Footer to Bottom of Page in CSS

4 Different Ways to Align Footer to Bottom of Page in CSS

Using flexbox, grids, margins and positioning
Ferenc Almasi β€’ 2023 June 13 β€’ Read time 4 min read
Learn how to align a footer to the bottom of the page using four different solutions in CSS.
  • twitter
  • facebook
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.

In this tutorial, we will take a look at how to align a footer to the bottom of the page using CSS. But first, let's see how the layout looks in HTML that we will be working with.

Copied to clipboard! Playground
<body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
</body>
The HTML layout that we will use throughout this tutorial.

Using Grid

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:

Copied to clipboard! Playground
body {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
}
Align footer to the bottom using CSS grid

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 header, 1fr (fraction) for the main content, and auto for the footer. Notice how the layout changes with and without the grid-template-rows property.

Header
With grid-template-rows
Footer
Header
Without grid-template-rows
Footer

Using Flexbox

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 flex-direction to column:

Copied to clipboard! Playground
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}
Align footer to the bottom using CSS flexbox

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 height to 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 flex-direction:

Header
flex-direction: column;
Footer
Header
flex-direction: row;
Footer
Looking to improve your skills? Master CSS from start to finish.
Master CSSinfo Remove ads

Using Margins

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:

Copied to clipboard! Playground
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  footer {
    margin-top: auto;
  }
Align footer to the bottom using flexbox + margins

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:

Header
flex-grow: 1;
Footer
Header
margin-top: auto;
Footer

Using Positioning

Last but not least, we can also use absolute or 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.

Copied to clipboard! Playground
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Align footer to the bottom using CSS positions

Note that we also need to set the width to 100% to ensure the footer takes up the full width of the page.


Summary

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.

CSS Tutorials
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.