6 ms·

Sticky Footer

155 points by ent101 7y ago

f06111b2bd9b55 7y ago
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 7y ago
  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 7y ago
    oh, okay. Nvm then.
m0dest 7y ago
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#sticky 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_.
- hnarn 7y ago
  > 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.
  - deleted 7y ago
    [deleted]
  - gwillz 7y ago
    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.
  - deleted 7y ago
    [deleted]
- whalesalad 7y ago
  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.
  - pg_is_a_butt 7y ago
    FWIW most people are dum
  - m0dest 7y ago
    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%20header,sticky%20footer 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.
deleted 7y ago
[deleted]
jakelazaroff 7y ago
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
vim-guru 7y ago
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.
plondon514 7y ago
Ironically this and (avoid 100vh on mobile web) https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html https://chanind.github.io/javascript/2019/09/28/avoid-100vh-... are on the front page at the same time.
- benmarks 7y ago
  This seems more like coincidence than irony.
  - reissbaker 7y ago
    The irony is that this "sticky footer" CSS uses a min-height: 100vh as part of achieving its effect.
    - Silhouette 7y ago
      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.
- sanderdlm 7y ago
  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 7y ago
    CSS is just broken. I want to use general expressions like height = a.height + b.height - 2*c.height
    - 7y ago
cmroanirgo 7y ago
> 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/master/assets/css/components/site.css 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 https://github.com/philipwalton/flexbugs), which ironically is linked directly from caniuse's 'known issues'.
tomcooks 7y ago
main { min-height: cal(100% - header height - footer height) }
- uallo 7y ago
  Header/footer height is (most) often not fixed but changes depending on your screen size.
  - deleted 7y ago
    [deleted]
  - tomcooks 7y ago
    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
darekkay 7y ago
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.
tonyedgecombe 7y ago
I really hate sticky headers and footers, especially if I'm browsing on a small screened device.
- nazka 7y ago
  Did you open the link? I am pretty sure it's not what you are suggesting.
- lucalanca 7y ago
  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".
c1yd3i 7y ago
This doesn't work on Safari. Lmao.
- deleted 7y ago
  [deleted]
ejveen 7y ago
Why not just set margin-top: auto for footer?
- httpsterio 7y ago
  If your page height is less than 100vh - footer height, the footer won't sit at the bottom of the page.
dstroot 7y ago
The article makes it look simple. The actual code that deals with various browsers is here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css https://github.com/philipwalton/solved-by-flexbox/blob/maste...
rambojazz 7y ago
Aren't CSS grids supposed to be the better solution for this kind of problems?

155 points by ent101 7y ago

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 7y ago
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 7y ago
  oh, okay. Nvm then.

m0dest 7y ago

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

hnarn 7y ago
> 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.
- deleted 7y ago
  [deleted]
- gwillz 7y ago
  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.
- deleted 7y ago
  [deleted]
whalesalad 7y ago
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.
- pg_is_a_butt 7y ago
  FWIW most people are dum
- m0dest 7y ago
  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%20header,sticky%20footer 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.

deleted 7y ago

[deleted]

jakelazaroff 7y ago

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

vim-guru 7y ago

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.

plondon514 7y ago

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

benmarks 7y ago
This seems more like coincidence than irony.
- reissbaker 7y ago
  The irony is that this "sticky footer" CSS uses a min-height: 100vh as part of achieving its effect.
  - Silhouette 7y ago
    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.
sanderdlm 7y ago
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 7y ago
  CSS is just broken. I want to use general expressions like height = a.height + b.height - 2*c.height
  - 7y ago

cmroanirgo 7y ago

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

tomcooks 7y ago

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

uallo 7y ago
Header/footer height is (most) often not fixed but changes depending on your screen size.
- deleted 7y ago
  [deleted]
- tomcooks 7y ago
  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

darekkay 7y ago

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.

tonyedgecombe 7y ago

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

nazka 7y ago
Did you open the link? I am pretty sure it's not what you are suggesting.
lucalanca 7y ago
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".

c1yd3i 7y ago

This doesn't work on Safari. Lmao.

deleted 7y ago
[deleted]

ejveen 7y ago

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

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

dstroot 7y ago

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

rambojazz 7y ago

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