Galen Gidman

Front-end and WordPress developer

Responsive, Flexible-Height Sticky Footers with JavaScript

Back in March, I wrote a post about creating sticky footers with CSS using display: table and display: table-row. Since I wrote that post, it’s become by far the highest-traffic post on the site. Obviously it’s filling a need.

Since writing it though, I’ve discovered some issues with that approach. Sliders seem to be the biggest problem. For whatever reason, responsive sliders like bxSlider, RoyalSlider, and a few others break when they’re placed inside of a table or an element with display: table applied. Since the sticky footer method I posted applies display: table to the <body>, that pretty much means that responsive sliders break everywhere for me.

In April, Cory Simmons posted about using JavaScript for Responsive Dynamic-Height Sticky Footers. I mentioned in my post that I didn’t really care for the idea of using JavaScript to power sticky footers, but I must admit that I like the approach he came up with:

See the Pen Responsive Dynamic Height Sticky Footer by Cory Simmons (@corysimmons) on CodePen.0

I think it really depends on what you need. If you’re building out a lightweight site that’s unlikely to use sliders or other more complex JavaScript components (I can only guess that display: table could prove problematic for them as well), then the CSS solution might be fine. For bigger sites though with more complex content, you might be best to go the JavaScript route.

1 Comment

Leave a Reply to Sigit Prasetya Cancel reply

Your email address will not be published. Required fields are marked *