Why not used position:fixed for a "sticky" footer?

Question

I've seen Ryan Fait's method for sticky footer as well as one here and here.

Why are these people making templates for sticky footers when #footer{position:fixed; bottom:0;} will suffice?

EDIT:

I will add that using position: fixed; for a footer does break margin: auto; centering in (at least) some browsers, thus creating the need for a wrapper tag. Part of my problem with the above mentioned methods is the extra tags which are confusing, syntactically incorrect (for the "HTML purists") and it eats bandwidth. However, a single wrapper around the footer is still, in my opinion, better than a whole jumbled page template to have to start with. And, "my" way is still more straightforward and eats less bandwidth.

Bergen

A sticky footer is one that sticks to the bottom of the window when the content isn't very tall, but when the content is taller than the window height the footer behaves like a normal footer, getting pushed down below the content not, as position fixed would give you, floating over the content. It may be that position:fixed is the effect you want, but it's not what sticky footers try and achieve. Personally, I reckon the demo pages posted for the techniques shodul have both tall and short example pages to better illustrate the effect. – Merrick

@Merrick - You have a good point there, in which case this whole thread needs to be reconsidered. What about position: absolute; bottom: 0; for your kind of sticky footer? – Bergen

that won't work either, again because it will overlap the bottom of your content (unless you add padding, but then this combined with height 100% on the content will cause permanent scrollbars to appear). To stop it doing this i think you need to implement one of the solutions you linked to. – Merrick

Answer 1

The difference between using position: fixed and Ryan Fait's method¹ is pretty fundamental.

When using position: fixed, the footer is always visible, and that's not what a sticky footer is trying to do.
The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height. In that case, the sticky footer will act like a normal footer, appearing just below the page content.

Here you can see the effect of a sticky footer. In the Result window, you see that the footer stays at the bottom of the page. Click on the 'Add content' button to add content, and then you will see that the footer shifts down to stay below the content.

---

^{1. This is a snapshot of 10 January 2013 from the Wayback Machine, as Ryan's website itself does not contain the original post any longer.}

Clotilde

Both links are dead in this post. – Woodborer

@Woodborer I see. I will try to resurrect or redirect the link to mcemperor.nl, I will also replace the link to Ryan's sticky footer. – Clotilde

You could check if Internet Archive has anything? I appreciate the fact that you updated such an old answer. – Woodborer

@Woodborer Good point, I've found a snapshot which actually contains the contents as it was written when I last saw it. – Clotilde