Sticky Footer with Absolute Positioning

A common issue with a site footer is when your content isn’t tall enough, you’re left with a hanging footer.

18953

There are a few ways to combat this but the following has worked best for me.

  • Absolutely position the footer to the bottom of the body which has a minimum height of 100% (CSS)
  • Get the height of the footer and apply padding to the bottom of the body to compensate for the footer (jQuery)

18953

Update:

After trying to implement this into a project I ran into some issues with applying the min-height to the body. The following seems to work out a lot better. I’ve also updated the js a bit to account for the admin toolbar in WordPress.

18953

Leave a Reply