SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Sticky Footer

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: ralph.m

    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by brad_magnus View Post
    @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

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by brad_magnus View Post
    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.

  10. #10
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by shinie21 View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •