Footer

Discussion in 'Web Design and Development' started by Hexiii, Oct 2, 2012.

  1. macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #1
    I've been trying to make footer stick to bottom. (When the content of the page isn't too long it would be in the middle of the page)

    But I can't come with a solution which would work both when the content is smaller than the whole display and when the content doesn't fit the display.

    I've tried google search, but that doesn't really help.

    When I work with percentages, it only takes percentages of the current display, not the whole page. So if it's on the bottom (bottom:0) it works when the content is smaller than a screen, but when it doesn't fit just one screen, the footer is on the bottom of the screen but there's the rest of the content underneath.

    Anybody has any simple solution?

    /e The same is with width. When I make it 100% it's usually ok, but when you make the screen smaller and you have to scroll to the side, the footer ends on the border of the first displayed content.
     
  2. macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #2
    This is the approach I use:
    http://ryanfait.com/sticky-footer/

    Both the html and body tags need to have 100% height. You need a page wrapper (excluding the footer) with a min-height of 100%, and you use negative bottom margins to free space for the footer. The footer doesn't need any special positioning, but it does need to be a fixed height that matches the negative bottom margins on the wrapper.

    The additional height declarations aren't necessary in Safari, but they might be needed for others.
     
  3. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #3
    Yeah, I tried this, but it doesn't really work well, at least for me :) It's too much at the bottom (under the screen) :)

    Maybe it's due to my margins as he also mentiones?
     
  4. lucasgladding, Oct 2, 2012
    Last edited: Oct 2, 2012

    macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #4
    It definitely works. I use it all the time.

    The margins would be my guess. Do you have the page online somewhere? I would be happy to take a look
     
  5. Hexiii, Oct 2, 2012
    Last edited: Oct 2, 2012

    thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #5
    Uh... not yet, but there's a grid of divs (3 rows x 5 divs) and each row has 30px margin-top.

    However I can upload it on a free hosting, I guess the ads on the top shouldn't be problem. It's not optimised for all browsers yet (It works best in latest Safari).

    And there are not many settings for the footer since I deleted the mess after trying. I am going to get back to it after finishing some other stuff.

    Would you take a look at it if I uploaded it?

    /e http://fcecountdown.ic.cz ignore the domain name, it was used for something else
     
  6. macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #6
    I would be happy to look. Let me know when it's up.
     
  7. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #7
    it is already
     
  8. lucasgladding, Oct 2, 2012
    Last edited: Oct 2, 2012

    macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #8
    I just checked the site, and I don't see the CSS for the sticky footer. I checked the DOM inspector to be sure I wasn't missing something. Are you sure the most recent code is online?

    In case it is just a stylesheet that's not being included, you're going to run into problems because there is no main wrapper. For this to work, there can only be two layout blocks inside the body. You need to wrap everything except the footer in one block, and that gets the min-height and the negative margin. The footer is the only other child to the body.
     
  9. Hexiii, Oct 2, 2012
    Last edited: Oct 2, 2012

    thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #9
    There is a wrapper, it's called div class="main", and there's everything except the top bar and the footer.

    And as I said before, I deleted the sticky footer code and will come back to it later.

    /e and yeah, there's is the blue bar with ads on the top, but that won't be there.
     
  10. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #10
    It works now, I just had to put some thought and order into it :)
     
  11. macrumors 65816

    NathanCH

    Joined:
    Oct 5, 2007
    Location:
    Stockholm, Sweden
    #11
    Thanks for this
     
  12. macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #12
    Glad to hear it. The code looks great.
     
  13. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #13
    But there is still one problem, when I make the window smaller that I have to scroll, there is a white rectangle above the footer which might be the push div or it's caused by the negative margins.

    Is there any solution for this? Since the background is gradient from white to gray, it doesn't really look good.
     
  14. macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #14
    Hexiii

    It's actually the default body background-color that you're seeing. The gradient background-image is only as high as the window, so anything beyond the window height is going to be the background-color. Personally, I would resolve the issue by adding a background-color before the background-image gradient. Use the second color from the gradient for the color, and things should be seamless.

    Let me know if that doesn't make sense. If you specify a background-color, you should see what I mean right away.

    Kind regards

    Lucas
     
  15. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #15
    Ah thank you. I'll definitely try that.

    Maybe it might work If I made a stripe of a png gradient and then repeat-x.

    /e Worked great, thank you very much :)
     
  16. macrumors newbie

    Joined:
    Sep 22, 2012
    #16
    the sticky footer is not good.. i don't like it..
     
  17. macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #17
    I'm glad I could help.

    Kind regards

    Lucas
     

Share This Page