Sticky Footer Not Sticking to Bottom

[chrisburton]

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?

[Paulie_D]

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

[chrisburton]

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

[Paulie_D]

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.

[chrisburton]

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

[chrisburton]

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)

[Paulie_D]

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

[chrisburton]

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

[Paulie_D]

No problem…

[Author]

Posts