DEV Community

Cover image for OhSnap! This How To Pin Footers in React
Gedalya Krycer
Gedalya Krycer

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
  • 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

Footer Height in Google Chrome Dev Tools

  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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


Thumbnail designed with Figma

Discussion (6)

Collapse
dorshinar profile image
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.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

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

Collapse
sammykapienga profile image
sammy kapienga

Thank you so much you have really saved my code day

Collapse
milanpanin profile image
Milan Panin

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

Collapse
linneagear profile image
Linnea Gear

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

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

So glad you found it helpful!!