While we all love javascript and you probably loading it on your site already, CSS solutions are generally better in terms of performance and usually degrade much more gracefully. Thus I wanted to share the method I use to achieve a pure CSS sticky footer.

For those of you who might not know, sticky footers behave in two ways depending on the amount of content your page holds. If your content ends before the bottom of the screen, the footer will stick to the bottom of the screen. If your content extends beyond the screen edge, then the footer is positioned at the end of the content.

There have been some effective solutions. But all these solutions require you to know what the height of your footer is, which is pretty difficult when creating a responsive site.

The Solution: Tables

Kicking you back into the 90’s, the CSS display:table property can let us achieve a sticky footer regardless of page height. You can see how this is being achieved in the pen below.

Essentially you set your body {display:table;} and then the footer {display:table-row;}. Then simply ensure that your content holder has a 100% minimum height. Easy peasy.

View Full Page Demo


See the Pen Pure CSS Sticky Footer by Maneesh (@maneeshc) on CodePen.