A smart Sticky Footer technique

After hearing “sticky footer” these days, I would think most people imagine one position: sticky situation where a footer element appears on the screen while in the scrolling context of a parent element.

That’s not quite what I’m talking about here. “Sticky footers” was a UI concept before position: sticky existed and they mean something a little different. The idea is that they stick to the bottom of the screen even when the content on the page is not enough to push them there. But if there is enough content, they are happily pushed down.

We covered five ways to do this in recent years, which included techniques that are somewhat modern, including calc(), flexbox and CSS Grid.

Join a sixth challenger! Reader Silvio Rosa wrote with this:

(Probably easiest to check out on a medium-sized desktop screen, which is still a bit where sticky footers matter most.)

It’s pretty much just this:

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

What I like about it is that it does not require any special extra wrapping for content without footer.

It’s also a little cerebral hemorrhage. When I see top: 100vh; I think well it will not work because it will push the footer outside the visible area. But that’s the smart thing. It will do so no matter how big the footer is (no magic numbers), and then the sticky positioning will “suck it up again” to stick along the bottom edge. But it will never overlap content, so it’s happy to be pushed down under content, which is a core bearing of the sticky footer pattern.

Leave a Comment