Sticky Footer discussion

Continuing the discussion from

Not a fan of your sticky footer example. Having fixed heights on anything is promoting bad practice, especially in RWD days, and I think it could have been better. This is a better example:

If we are going to show code examples we should be using best practices in doing so :slight_smile: .

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.:wink:

You’re right, the article was about techniques available from within Compass, rather than writing something yourself.

I can’t see Compass being used here.

on best practice -

“in HTML/CSS development the term ‘best practices’ is often used when looking for over zealous absolute truths”
Nicolas Gallagher

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?

“no hacks”
(Except for any that might be included in html5 shiv and jquery)

Mmmm, that’s some delicious Stone Soup.

Those aren’t hacks? Including Javascript files are hacks? Seriously? You must be joking.

Not to mention they are IE8 only so you could actually remove that if you don’t want it.

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?

Ok then, I would like to reword it to say that broken examples shouldn’t be used :wink: .

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.

1 Like

As Compass is OSS, I guess you’re more than welcome to fix it


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.