
Sticky Footer - ent101
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
======
m0dest
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...](https://developer.mozilla.org/en-
US/docs/Web/CSS/position#sticky)

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

~~~
hnarn
> 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.

~~~
gwillz
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.

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

~~~
sanderdlm
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.

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

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

~~~
kaishiro
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));
      }

~~~
amelius
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?

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

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

------
jakelazaroff
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

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

------
cmroanirgo
> _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...](https://github.com/philipwalton/solved-by-
flexbox/blob/master/assets/css/components/site.css)

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](https://github.com/philipwalton/flexbugs)),
which ironically is linked directly from caniuse's 'known issues'.

------
vim-guru
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.

------
dstroot
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...](https://github.com/philipwalton/solved-by-
flexbox/blob/master/assets/css/components/site.css)

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

------
f06111b2bd9b55
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/](https://alisdair.mcdiarmid.org/kill-sticky-headers/)

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

~~~
GlitchMr
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.

~~~
f06111b2bd9b55
oh, okay. Nvm then.

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

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

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

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

~~~
tomcooks
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

