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.


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)



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.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.