Perfect Footer!

You know, I've been struggling with writing what should be a simple app component: a footer. Sounds easy, right? Yeah, that's what I thought. I wrote my code and it seemed fine, but then I hit that classic problem: "What happens if I don't have enough content on the page? Will the footer still stick to the bottom?" Maybe you came here because you're facing the same issue, asking yourself:

• "Why is my footer sticky?"
• "Why is my footer fixed in the middle of the page?"
• And other why?"

That was my question for the longest time, too. I even have an empty note from last year that proves I've been wondering about this forever.

But I finally found a video on YouTube that cracked the problem, and it's actually super easy to implement. The solution is using Flexbox (yeah, I'm a big fan of flex), and it solved all those problems. Well, at least until a new issue pops up, right? 😉

Here's the solution:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

Since the body is a flex container and the flex-direction is set to column (top to bottom), the margin-top: auto on the footer automatically pushes it to the bottom of the page. Simple as that.

source :

- https://www.youtube.com/watch?v=0yaef3KKyGg&lc=UgxDp63uZyH1ELUQK414AaABAg