Responsive sticky footer woes and fixes

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.

yes-no

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:

Screen Shot 2014-05-07 at 12.27.30 AM

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

18 thoughts on “Responsive sticky footer woes and fixes

  1. Glad it was such an easy fix 😉

    Btw, I loved your responsive typography talk – great job, I learned a ton!

  2. Safari 8.0 doesn’t like display: table-row when a clearfix is used. (commenting the clearfix css in my theme made it work, but then the clearfix was broken of course.)

    I found using display:table-footer-group did the trick. Not sure if there is a disadvantage, apart from the lack of padding and margin but that is also the case with display: table-row and can be “fixed”.

    Anyway, thanks!

  3. Very nice solution works almost as exptected.

    There’s are always horizontal en vertical (disabled) scrollbars on the bottom and the right, no matter how empty the page.

    I think it’s a better idea to use

    overflow:auto;

    instead of overflow:scroll; on the body element.

    Then the scrollbars only appear if the are really needed 🙂

  4. Thanks, this helped me solve my problem.

    I don’t quite understand the point of setting height: 1px for the footer though. Is that some kind of browser hack?

  5. Wow this is the best solution. I used to set a minimum height of the page container for big desktop size monitors but I think what you suggested is a better solution.

    Thank you Natalie for sharing this.

  6. It works and I don’t know why! Thanks!

    The only things I didn’t put were the overflow properties.

    html {
    height: 100%;
    /* overflow: hidden; */
    }

    body {
    height: 100%;
    /* overflow: scroll; */
    }

  7. It will be better to set:

    body {
    height: 100%;
    overflow: auto;
    }

    to get rid of the horizontal scroll bar in Windows desktop.

Leave a Reply