Yes that sticky footer by Ryan Fait has never worked properly and failed in common browsers since the day it was posted. In these days of responsive design that method is a virtually useless technique and should be avoided.
I realise the article wasn’t about the footer as such but it’s worth mentioning all the same.
I used the compass extension literally just for the modular-scale. I think the Gumby framework uses the same thing (or did). In the end it wasn’t worth the bloat/dependancy and I ended up writing my own mixins to replace it.
People who use sticky footers should take the time to check their design on high-res screens in portrait mode.
It might even be a good idea to check it on a 4K-screen in portrait, they will be common faster that you think.
I have a couple of 27" QHD-screens in portrait, which is perfect because you don’t have to scroll so much unless the page is huge (or the designer is an idiot)
…and i frequently fail to notice that some sites has any footer at all, because its ten million miles away from the rest of the content.
Especially on designs where there’s just some short sales-waffle on the top, and the actual call for action is in the footer, at the bottom of the ocean.
I bet lots of people just moves on from pages like that, thinking “OK they like cupcakes… so what?” never noticing that they also sell them.
So perhaps use sticky footers, but set a limit for how far away from the content is should be allowed to be?
Apologies to derail this thread but I just needed to answer this question assuming it was related to the demo that Ryan posted (which is actually my codepen demo). There is no jquery on the demo and there are no hacks. The html5 shiv is for the html5 elements that are not supported in IE8. You don’t need to use the html5 elements if you don’t want and use html4 element instead and the demo will still work back to IE8.
As the inventor (I hate that term) of the original sticky footer way back in 2002 I believe I talk from experience on the matter.
Yes that’s a good point and setting a media query based on height can solve this problem and is a simple matter of removing the height from the display:table in my example unlike all the other pusher methods.
Maybe these posts should be removed to another thread so as not to derail the article?
This article covers only the mixins/functions that Compass offers. That means, the sticky footer is based on Compass implementation (not mine). The demo you presented is excellent, but it doesn’t use Compass which is presented in this article.