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