Getting footers to be actual footers

I threw up my first draft of Profado, a side venture I’ve been working on the past few days. The design is pretty barebones, but I still had my share of struggles getting the basic framework to work well.

One of the issues I ran into was getting a footer to actually stick to the bottom of the window when the content was less than the height of the window. This was such a silly, pestering issue, like a mosquito bite on my heel — I felt compelled to share it (plus, writing something down helps me commit it to memory.)

The trick is to wrap your entire content — including your footer — in an otherwise unremarkable container div, like so:

<body>
    <div id='container'>
    // content goes here
        <div id='footer'></div>
    </div>
</body>

Then, you apply a little CSS magic: making the footer element fixed to the bottom of the container while making the min-height of the container (an underrated attribute from CSS2) 100% — which guarantees that the footer makes it to the bottom of the window.

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}

That’s it! Nothing fancy, but it’s easy to get bogged down in the often-convoluted world of position attributes. You can check it in action out here and here.

If you liked this post, you should probably follow me on Twitter.

  1. justyduke posted this