DEV Community

Cover image for How to make your footer stay at the bottom of the page.
Ineza Bonté Grévy
Ineza Bonté Grévy

Posted on • Updated on

How to make your footer stay at the bottom of the page.

I recently met an issue with positioning a footer. After finding a solution, I decided to document it in this post.

Our goal is to:

  • Make the footer stay at the bottom even when the content is not filling the screen.
  • Make the footer appear at the end of the document when the screen is full of content (instead of overlapping the bottom section)

1. Give your container a min-height of 100vh

The body tag which holds your content should be given a minimum height of 100vh. This will ensure that the body will always take full height of the page even when its content is not filling the page. You can apply this to the body or the container which has the footer as the last tag.

body {
 min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

2. Make your body a flexbox

Make your body a flexbox by giving it a display property with the value of flex and also change its direction by using flex-direction set to column

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

3. Give the footer a margin-top of auto

Assuming your body has a similar layout to this;

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
Enter fullscreen mode Exit fullscreen mode

You can give your footer tag a margin-top property with the value of auto

footer {
  margin-top: auto;
}
Enter fullscreen mode Exit fullscreen mode

And that's it three simple steps :)

Thank you for reading this article ♥️. Feel free to ask any questions you may have down below and I'll get back to you.

Top comments (5)

Collapse
 
drako88 profile image
Julius Alamarvdashti

Hi, Thank you so much for documenting this!

I was looking everywhere for an answer on how to do this but they all said to use position absolute and that just didn't work.

How did you come up with using flex on the body? it was the missing piece for me.

Collapse
 
sergo profile image
Sergo

Oh, my god! It's like a magic. After struggling a lot with it I came here. And now it works. Thank you!

Collapse
 
inezabonte profile image
Ineza Bonté Grévy

Glad it helped

Collapse
 
afif profile image
Temani Afif

instead of flex:1 you can add margin-top:auto to the footer

Collapse
 
inezabonte profile image
Ineza Bonté Grévy

Thank you. Your solution is more efficient.