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.

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_.

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.

I get where you're coming from. I was around then too. :)

Then this happened:

https://trends.google.com/trends/explore?date=all&q=sticky%2...

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.

Well no, "fixed" is a position relative to the the viewport.

"Sticky" is like a conditional/hybrid between "fixed" and "relative".

I mean, I call this kind of footer "sticky" but it's not a great name and I can't think of anything better.

Ironically this and (avoid 100vh on mobile web) https://chanind.github.io/javascript/2019/09/28/avoid-100vh-... are on the front page at the same time.

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.

CSS is just broken. I want to use general expressions like

    height = a.height + b.height - 2*c.height

You can!

  :root {
    --header-height: 5em;
    --container-height: 25em;
    --other-height: 2.5em;
  }

  div {
    height: calc(var(--container-height) - var(--header-height) + (var(--other-height)*2));
  }

But this example uses static sizes, unlike the sticky footer problem of the article (where e.g. the window can be resized by the user).

Can CSS calc() be used with dynamic widths or heights of other elements?

This seems more like coincidence than irony.

The irony is that this "sticky footer" CSS uses a

    min-height: 100vh

as part of achieving its effect.

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.

I really hate sticky headers and footers, especially if I'm browsing on a small screened device.

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".

Did you open the link? I am pretty sure it's not what you are suggesting.

Flexbox makes this so easy! I remember having to do some weird black magic with negative margins to make this work.

old_man_yells_at_cloud.jpg

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.

The code: https://github.com/philipwalton/solved-by-flexbox/blob/maste...

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.

The article makes it look simple. The actual code that deals with various browsers is here: https://github.com/philipwalton/solved-by-flexbox/blob/maste...

Aren't CSS grids supposed to be the better solution for this kind of problems?

Reminder that here is a neat little script that will let you remove sticky headers and footers with just a simple click:

https://alisdair.mcdiarmid.org/kill-sticky-headers/

Please just stop using stickys. They are annoying. Thanks.

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.

oh, okay. Nvm then.

Why not just set margin-top: auto for footer?

If your page height is less than 100vh - footer height, the footer won't sit at the bottom of the page.

main { min-height: cal(100% - header height - footer height) }

Header/footer height is (most) often not fixed but changes depending on your screen size.

Not necessarily true, and in that case you'd just have to update min-height to the new header/footer sizes.

Still wouldn't downvote