Grow your CSS skills. Land your dream job.

Sticky Footer Not Sticking to Bottom

  • # September 4, 2012 at 7:57 am

    Has anyone had trouble with a sticky footer not actually sticking to the bottom or cutting off content? I’m using this one here. If I have a lot of content, it goes right under the sidebar without giving any room to breathe. See here (link removed).

    If I have very little content, it doesn’t stick to the bottom. Instead it goes right under the page-wrap/content. See here (link removed).

    Edit: I am thinking jQuery would be the solution here, no?

    # September 4, 2012 at 8:08 am

    You refer to a page-wrap but I’m not seeing one in your HTML

    # September 4, 2012 at 8:12 am

    @Paulie_D Oops, I forgot to add that. Updated the links above.

    # September 4, 2012 at 8:22 am

    I haven’t played with it yet but I think you might be missing another internal wrapping div.


















    at least according to a cursory reading of the linked article.

    # September 4, 2012 at 8:30 am

    @Paulie_D I believe main refers to where the content goes. I could be wrong so I’ll test it out.

    Edit: You were right.

    # September 4, 2012 at 8:55 am

    All right. So it solves the breathing room issue however, it still does not actually stick to the bottom of the page.

    Updated Fiddle (link removed)

    # September 4, 2012 at 9:00 am

    I think all you need to do now is add 100% height to the html selector…

    # September 4, 2012 at 9:06 am

    @Paulie_D Wow. I honestly didn’t think that would make a difference. Really appreciate the help, thank you.

    # September 4, 2012 at 9:08 am

    No problem…

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".