OhSnap! This How To Pin Footers in React

The "OhSnap!" series explores bite-sized tips that you can apply today.

---

"How to pin the darn footer to the darn bottom of the darn page???"

It's a common problem where the amount of content on the page does not go past the viewport/fold of the screen. This in turn causes the footer to rather annoyingly pop-up to the middle of the page.

Luckly, there is a simple solution...

1 — Segment the page's HTML/JSX in two sections

<div className="content-container"> 
  •••
</div>
<footer className="footer--pin">
  •••
</footer>

• All the main page content should be placed in a div that has a "content-container" class.

• All the footer content should be in a footer element as per best practices and assigned a "footer--pin" class.

(Names for these classes are of course up to you.)

---

2 — Get the actual height of the footer

• The actual height is margin-top + border-top + padding-top + content + padding-bottom + border-bottom + margin-bottom

• You can find this with the Chrome DevTools box model section.

---

3 — Add .content-container style properties

.content-container {
  min-height: calc(100vh - 34px);
}

• Using calc() we are saying that the content div should take up 100% of the viewport, minus the height of the footer.

• This will force the content container to take up all the available screen space, minus the footer height, which in effect pushes down the footer.

---

4 — Add .footer--pin style properties

.footer--pin {
  position: relative;
  left: 0;
  bottom: 0;
}

• Set the footer to a relative position and pin to the bottom and left.

Result

The great thing is that the footer also stays pinned at the bottom, even when more content is added to the page.

---

More Resources

• Sticky Footer, Five Ways

• React page keep footer at the bottom of the page

---

Thumbnail designed with Figma

Comments

[Dor Shinar]

That's not a very flexible way, and I would not recommend relying on fixed pixels for that.
Using flexbox with justify-content: space-between or CSS grid would give you the same result, without using absolute positioning and fixed height.

[Gedalya Krycer]

Thanks for sharing! I’ll have to look at those ways as well.

[sammy kapienga]

Thank you so much you have really saved my code day

[Milan Panin]

You save my day with this code! Thank you! :)

[Linnea Gear]

This is great, this worked when we did a navbar at work the other day. Positioning is a lifesaver!

[Gedalya Krycer]

So glad you found it helpful!!

[paras231]

thanks it worked really well