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
Thumbnail designed with Figma
Top comments (7)
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.Thanks for sharing! I’ll have to look at those ways as well.
Thank you so much you have really saved my code day
You save my day with this code! Thank you! :)
This is great, this worked when we did a navbar at work the other day. Positioning is a lifesaver!
So glad you found it helpful!!
thanks it worked really well