Thanks for sharing this. Some folks are still using JavaScript for this, and it's unnecessary.
One nit: This isn't a "sticky" footer, and that's a good thing. I'd just call this a "bottom footer" for lack of a better term.
Sticky is used to describe an element that starts with a non-fixed (non-overlaying) position such as position:static and switches to a fixed (overlaying) position to stay visible on screen during scrolling.
FWIW most people have called this a sticky footer since the dawn of Web 2.0. Go back ten years and you’ll find posts describing the sticky footer that should be at the end of the content (if the content goes below the fold) or the bottom of the browser window, if the content doesn’t push the footer there.
I understand the point you’re arguing but at some point the thing something is called becomes it’s name.
If you want a name for your concept I’d call this a fixed-positioned footer which is explicit that it’s position is permanently fixed and won’t change. It also correlates with position: fixed.
tl;dr You’re concept of a sticky footer is different than the rest of the web development community so it’s important to realize that and not correct someone for being correct.
The popular usage of "sticky headers" had the opposite meaning of "sticky" compared to "sticky footers." The usage of this word to refer to the header behavior won out and was formalized as position:sticky in CSS3 Layout.
The problem now is when people use "sticky footer" in the former sense, it's misinterpreted. Note the other comments on this story.
> I'd just call this a "bottom footer" for lack of a better term.
Maybe I'm introducing more confusion here, but wouldn't the term for this be "fixed"? I.e. it's fixed to the bottom of the page, regardless of the size of the window.
And both of these "articles" are hardly worth their title let's be honest. This sticky footer one could just be a link to the flex-grow documentation on the MDN, and it's not even a real sticky footer. The 100vh one comments on an issue that we've known about since responsive design became a thing in 2011 (2012?). Also, putting "A Better Solution: javascript" at the end of a blog post about a CSS problem is a joke.
Although the article does end with a warning about cross-browser CSS being a bit more involved, and if you look at the full source code it links to, this is one of the issues it addresses.
Sticky footer, in this case, is not really sticky as in "always there as you scroll". It's more like: "always at the end of the screen, even if there's not enough content".
I'm using such a "sticky" footer for a lot of my projects. At first, I was fine with a simple flexbox solution. Then I've tested this layout in IE11 (because it is known to have a lot of flexbox bugs). I've fixed it, but then I've got issues with Safari. It was this article that finally helped me solve the issue for all important browsers.
> the CSS required to make this demo work cross-browser is slightly different from the CSS shown in the example above, which assumes a fully spec-compliant browser. See the comments in the source for more details.
It've been great if he'd hooked up the page with caniuse to determine the best css to use for a individual's use case. See also his own flexbugs (https://github.com/philipwalton/flexbugs), which ironically is linked directly from caniuse's 'known issues'.
For websites this is just fine, but there's still the case with web-apps where you want the background to be the colour of that footer or header, so that overflow scrolling looks good.
This is different. The sticky footer as defined by the article means that the footer appears at the bottom of the document, not viewport. It has nothing to do with position: fixed.
One nit: This isn't a "sticky" footer, and that's a good thing. I'd just call this a "bottom footer" for lack of a better term.
Sticky is used to describe an element that starts with a non-fixed (non-overlaying) position such as position:static and switches to a fixed (overlaying) position to stay visible on screen during scrolling.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#st...
This is: The footer is placed at the bottom of the window or the bottom of the body, whichever is _lower_.
Sticky would be: The footer is placed at the bottom of the window or the bottom of the body, whichever is _higher_.