Responsive Sticky Footer

[brad_magnus]

My first attempt at Responsive Design: http://dev.takewingtraining.com/GetInTouch.php

My problem is that I can't find a solution for getting the footer to stick to the bottom that works for my layout and is responsive. My layout has 4 wrappers in the body to allow for backgrounds that extend left and right.

Any help on how I should make it work is really appreciated. I've been beating my head against a wall for a couple days now....

[ralph.m]

Hi brad_magnus. Welcome to the forums.

Sticky footers are a bit of a pain to get right, and I guess you are adding an extra degree of difficulty there. We have a really comprehensive tutorial here on how to get a sticky footer working which may help you:

http://www.sitepoint.com/forums/show...66#post1239966

Personally, I don't like these contortions, so what I do instead is make the footer background color the background color of the body element. That means that the footer will always sit nicely under the content, but that there won't be a big color gap at the bottom of the page on large screens. Then of course you need to move the original body background color to the #content_wrapper instead.

[brad_magnus]

Thanks for taking the time to answer. I've many similar ways to sticky footer. But with a responsive design, the footer height is going to be different at different screen widths. I suppose I could use the media queries to define different footer heights and negative margins, but I was hoping for a more elegant solution.

I hadn't thought of moving the swapping the body background with the footer this time. I've done that in the past, and I think that may be the easiest solution in this case. I'm gonna assume the majority of visitors to this site will be on smaller screens than my 24" monitor.

[RyanReese]

Why would the height be different with different screen widths?

Unless you are solely having the height based on the cnotent inside, I don't see why that should matter. And either way you should still be able to give a size that will allow text to never leave the footer and that will be able to be usable for a sticky footer.

[brad_magnus]

@RyanReese - The content in the footer scales based on a grid. When the display width is less than 480px, the grid turns into just one column and everything stacks up. I have an image in the footer that scales up and the links stack. Check the original link to see what I mean.

It's a responsive design, so it all needs to be flexible.

[Paul O'B]

Hi,

You could still do a sticky footer on that page but you'd need to use a 100% page wrapper as the min-height:100% element and then you'd just stack your page content inside that with the footer following after in the normal sticky footer way.

However as you are changing the height of those elements with media queries when the page is closed then you'd have to also change all the sticky footer code to match which is a bit of a pain. A sticky footer has to be a known height or it won't work. I think Ralph's solution of just having a solid colour under the footer would be a more elegant and less code intensive solution.

Sticky footers are best when they hold fixed height content and are relatively small.

[brad_magnus]

@Paul O'B - Thanks for your input. I agree that the background color is the most elegant solution. But I'm afraid I'm gonna have to use media queries to determine the height of the footer. I have a contact page with only a few lines of content, on top of that the contact form disappears when the message is sent. leaving only 4 or 5 lines of content. Having the footer be 1000-1200px tall isn't a good design solution. I kinda hate to do it, but I feel it may be the best for this problem. Next time, I'll just keep the footer design simpler.

[Paul O'B]

@Paul O'B - Thanks for your input. I agree that the background color is the most elegant solution. But I'm afraid I'm gonna have to use media queries to determine the height of the footer. I have a contact page with only a few lines of content, on top of that the contact form disappears when the message is sent. leaving only 4 or 5 lines of content. Having the footer be 1000-1200px tall isn't a good design solution. I kinda hate to do it, but I feel it may be the best for this problem. Next time, I'll just keep the footer design simpler.

Yes it can look odd if the footer is high up the page and that's when a sticky footer works best. Mind you on my 27" imac small sticky footers look lost so far away from the content. There's always someone who will complain no matter what you do

[ralph.m]

I'm gonna have to use media queries to determine the height of the footer.

There's really no need to set a height on the footer. In general, setting heights on anything is a bad idea, because it can lead to text spilling out of boxes etc, so I never set heights.

If you are worried about the footer ending up too high on some pages with little content, a better solution would be to set a min-height on the content area, so that the footer is always at least a certain distance down the page.

E.g. If you set the .content area to min-height: 600px; then at least there will always be some space on the page before the footer.

[brad_magnus]

Yes it can look odd if the footer is high up the page and that's when a sticky footer works best. Mind you on my 27" imac small sticky footers look lost so far away from the content. There's always someone who will complain no matter what you do

I agree with looking lonely at the bottom, even on my miniature 24" it doesn't look good... But I'm betting the majority of the traffic to the site will be from business professionals/executives that do 90% of their work on 15" laptop monitor. Thanks for being friendly and helping out. I think it's time to launch this site.

[shinie21]

I hunted for a while, found this to be the best solution.

http://www.codicode.com/art/the_best_sticky_footer.aspx

Uses js but works really well, and all of the other I could find. solutions were tough to use in responsive design.

[Paul O'B]

I hunted for a while, found this to be the best solution.

I prefer this one for IE8+. It needs no javascript, no push div (which should never have been needed anyway if you are doing it correctly) and needs no fixed height on the footer so is perfect for responsive sites.