How do you get the footer to stay at the bottom of a web page? (HTML/CSS)

Subscribe to my newsletter and never miss my upcoming articles

You have a problem

You want to get the footer to stay at the bottom of the page in all browsers.

Example of your situation:

Here's how to do it.

Solution

Here's how to make your footer stay at the bottom of body.

.content {
    min-height: calc(100vh - 100px);
    /* 60px header + 40px footer = 100px  */
}

You can use any footer and header height, not just 40px and 60px. Just don't forget to change the number of px you subtract from 100vh.

Result:

In the end...

Hope you found this solution useful!

I share a lot of useful HTML, CSS, and JavaScript tips on Twitter, if you want to upgrade your skills don't forget to follow me (or just to say Hi).

And also, every week I send out a "3–2–1" newsletter with 3 tech news, 2 articles, and 1 piece of advice for you.

📌 Subscribe to my 3–2–1 newsletter! 📌

No Comments Yet