CSS - How can I ensure the footer is always at the bottom of the page? - 30 seconds of code

CSS, Layout · Oct 30, 2022

Preventing the footer from floating up the page is important when trying to create a polished website. Pages with short content can run into this issue, but it’s easy to fix with a few lines of CSS. Assuming your HTML looks something like the snippet below, here are two modern ways to ensure the footer is always at the bottom of the page:


<
body>
  
<
main>
</
main>
  
<
footer>
</
footer>
</
body>

Using Flexbox

You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the body element min-height: 100vh, display: flex and flex-direction: column. Then, give the footer element a margin-top: auto to make its margin fill the remaining space between it and its previous sibling. Note that this technique will not stretch the previous sibling, but rather push the footer to the bottom of the page.

body
 {
  min-height
:
 100
vh
;
  display
:
 flex;
  flex-direction
:
 column;
}
footer
 {
  margin-top
:
 auto;
}

Using Grid

You can also use grid in a very similar fashion. Simply swap display: flex for display: grid and flex-direction: column for grid-template-rows: 1fr auto in the body element. No additional attributes are needed for the footer element. In this case, the fr unit is leveraged to stretch the main element to fill the remaining space.

body
 {
  min-height
:
 100
vh
;
  display
:
 grid;
  grid-template-rows
:
 1
fr
 auto;
}

Notes

As you can see, both techniques are straightforward to implement. Depending on your needs one might be more suitable than the other. Generally speaking, grid is more flexible in most cases and can help if you have more complex layouts, which can include a header or sidebar.

CSS – How can I ensure the footer is always at the bottom of the page? – 30 seconds of code

Using Flexbox

Using Grid

Notes