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;
}
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;
}
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>
You can give your footer tag a margin-top property with the value of auto
footer {
margin-top: auto;
}
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.
Oldest comments (5)
instead of flex:1 you can add margin-top:auto to the footer
Thank you. Your solution is more efficient.
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.
Oh, my god! It's like a magic. After struggling a lot with it I came here. And now it works. Thank you!
Glad it helped