Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.
What’s a sticky footer?
Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.
That is the art of coding a sticky footer.
The flexible CSS3 solution
Before CSS3, many sticky footer solutions required you to specify an exact height for a sticky footer, in either pixels or ems. But if your sticky footer contains some WordPress widgets that could be just about any height, then a fixed-height solution just won’t work. Enter CSS3. I usually start a WordPress theme with Underscores, which gives us an HTML structure for the page like this:
We can add just this bit of CSS to code up a responsive sticky footer that works, no matter how tall (or short) it might be:
Now we’ve got a responsive sticky footer that will stick to the bottom of the window.
The first problem and solution
The first problem I encountered was trying to get images, especially images with captions, to behave as expected in a responsive layout. No matter what I tried, the
.wp-caption was just too wide, causing horizontal scrolling when the screen was narrower than the image/caption. After hours of downloading assorted themes to check my own responsive image CSS against theirs, it finally occurred to me what the issue was.
Anyone who’s ever had to place a long string of unbroken text, like a URL, in a narrow HTML table column has bumped up against the HTML table’s weird handling of widths when the content in a table cell is too wide. I went back in and added a fixed table layout to the
.site div, and voila! My layout was fixed.
I thought it was all smooth sailing from there, until I got a message that my blog was difficult to read on iOS.
The second problem and solution
There I was, all gloaty that I’d remembered about using fixed table layouts, when I got this comment on Google Plus:
Eek, that didn’t sound good. So I opened up my iPhone to take a look and confirmed that I was seeing the same behavior. The issue was that iOS’s famous momentum scrolling wasn’t working. So you had to laboriously scroll line by line and there was no way to swipe quickly up or down the screen to set off a smooth scroll up or down the page. And, yep, about halfway down, the page was just suddenly blank. What was going on?
Luckily, I didn’t have to poke around too long to find a hint on Chris Coyier‘s CSS Tricks. Turns out that because I had set the
<html> element to
overflow: hidden, and then the
<body> element to
overflow: scroll, iOS had taken that as a cue to disable momentum scrolling. Luckily, it was a quick fix to add it back:
And now we’ve got a nice, responsive sticky footer that scrolls nicely on iOS. Phew.
A new approach on the horizon
One thing you’ll quickly learn with CSS is that you can never get comfortable with anything. As much as I like this solution to a sticky footer for now, Flexbox has it all over CSS table-like layouts. Browser support isn’t quite where I’d like it to be just yet, so for now, I’ll stick with this solution, but I’ll be keeping an eye on browser support for CSS Flexbox as it’s an even better solution to the sticky footer conundrum.
Image credit: Mahalie Stackpole