Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.
That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to the bottom of the screen, even when the content of the page isn’t enough to push them there. But if there is enough content, they are happily pushed down.
We covered five ways to do this in years past, which included techniques that are somewhat modern, including calc(), flexbox, and CSS Grid.
Enter a sixth challenger! Reader SÃlvio Rosa wrote in with this:
(Probably easiest to check out on a medium-sized desktop screen, which is kinda where sticky footers matter the most anyway.)
It’s pretty much just this:
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}What I like about it is that it doesn’t require any special extra wrapper for non-footer content.
It’s also a little brain-bending. When I see top: 100vh; I think well that won’t work because it will push the footer outside the viewable area. But that’s the clever bit. It will do that no matter how big the footer is (no magic numbers), and then the sticky positioning will “suck it back up” to stick along the bottom edge. But it will never overlap content, so it’s happy to be pushed down below content, which is a core tenet of the sticky footer pattern.
Cool! :)
I emailed, bookmarked and saved this to my notes so that I do not forget to use it in my next project. Very tight!
That is simple elegance…
In my opinion, it is nonsensical to use js for things like modifying css. That’s why we have grid, flex to make it as simple as possible ;)
You’re missing the point of this article in your comment. No CSS was modified with javascript. The only javascript code you see was added for convenience and not necessity (easier to showcase the effect the CSS has).
Your code – on the other hand – show’s another alternative to achieve the same effect of this demo. So it is still relevant.
Seeing this on my phone, I was rather confused. Then it clicked, and editing the JS to remove all content made it work for me.
Am I missing something? I don’t see any sticky footer in the codepen. Checked Firefox, Chrome and Edge on mobile.
It’s sticky when the content isn’t big enough to fill the space, so if you grab the lower left corner of the code pen and make it much taller so the paragraphs have space below them you will see that the footer stays on the bottom and the white space expands, but when you reduce the size so the content goes below the “fold” the footer goes down as well.
Brilliant! Sometimes the best solutions are the simplest (when you know how) was struggling with this just yesterday and getting ‘creative’
I’m no guru…where is the sticky element coming from?
Neat. For Greg – the js is just to add or remove content. For Tom – try making the code window taller and remove content.
Oh, thanks to that, I didn’t notice ;)
For those on phones here is a test link. Same thing but less content.
https://cdpn.io/kunukn/debug/JjyVRyR
Well isn’t that just freaking awesome.
safari mobile enters the chat
It appears to work for me on Safari Mobile, are you seeing differently?
This inspired me to try making a sticky header with
position:sticky;. I’m a fan:I love this, thanks!
Hmm, applying this to my existing footer to no avail. Any idea what kinds of things might break it? Seems simple enough.
“First of all, note that sticky will always stay sticky within it’s parent container” .. So if your element doesn’t have a bigger container, it won’t work.
Quote from: https://www.hamrodev.com/en/tutorials/css-sticky-and-wrapper-containers
Had to figure this out the hard way – in my case I had a wrapping div around everything (needed for offcanvas menu transition), which programmatically had the height of 0 (some scuffed overflow stuff happened there).
That did it, thanks!
You might want to use
html, body { min-height: 100vh; }instead if you have a sticky navigation bar.It kept vanishing after a certain scroll height was reached.
I kind of feel like this method causes the scrollbars to show up for no reason on Firefox sometimes when resizing the window? I’m not sure why though
Love the simplicity. However, even with short content, if the first element (header) has a top margin, it pushes the footer down by by that margin. It doesn’t push it down if body has a top padding, though.
Hi nice trick, can you update post with info provided in codepen?
thanks :)
This is so beautiful, I cried. Bookmarked and saved in a .txt cheat sheet of tricks I keep.