DEV Community

loading...
Cover image for OhSnap! This How To Pin Footers in React

OhSnap! This How To Pin Footers in React

gedalyakrycer profile image Gedalya Krycer ・2 min read

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 (4)

pic
Editor guide
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
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!!