June 5, 2012 in PSD to HTML

Sticky Footer

As the web designs continue to evolve for new trends and practices, many a times these days we see that the footer of a website pages is so designed that there is no white space below the footer. In such cases, we need to make the footer as sticky so that it stays at the bottom of browser window, even if content of page is not long enough to fill the page.

Sticky footer is a CSS technique that makes the footer of webpage stick to the bottom of browser window, even if the page content is not long enough to fill the height of browser. Also, this sticky footer stays at the bottom of page if the content is longer than the browser window.

Please have a look at the demo page to see the effect in action.

Looks beautiful! Isn’t it? Let’s see how it works.

HTML

<div id=”wrapper”>
    <div id=”container”>
        <div id=”content”>
            <!-- body of page here -->
        </div>
    </div>

    <footer>
        <!-- footer content here --> 
    </footer>
</div>

CSS

body, html {
    height:100%;
}
#wrapper {
    position: relative;
    min-height: 100%;
    height: 100%;
}
#container {
    padding-bottom: 100px;
}
footer {
    bottom: 0px;
    height: 100px;
    position: absolute;
}

This is the only code that you need, and it works in all browsers. Yes you got this right it works in IE6 too.