Semi-sticky page footer

Often, our site designer wants a web page footer that’s glued to the bottom of the page. I don’t mean position:fixed — it needs to be something that appears at the very bottom of the HTML document, whether the page scrolls or not.

So this how I do it. The technique uses a combination of height: 100% and absolute positioning of the footer. Here’s how it works:

First we need to set both html and body to a height of 100%. This doesn’t affect how the page itself is displayed, but it’s necessary for what comes next. We also remove all margins and padding on the body (unless there’s a CSS reset that does it already) so that “100%” actually means “100%”.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Next, we wrap all the HTML content of the page inside a wrapper element — I’ll call it #container — and set min-height:100% on that element. In addition, we position it relatively so that the footer can be positioned absolutely within the container.

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

Finally, we add the footer, which is positioned absolutely at the bottom of the #container. Since the #container has a minimum height of 100%, we know that even if the page doesn’t scroll, the footer will appear at the bottom of the browser window — just like position:fixed. But unlike that approach, if the page does scroll, the footer won’t be visible until we scroll all the way to the bottom. It’s the best of both worlds.

footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

jsFiddle demoSee it in production

Leave a Reply

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

*