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.