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.

About the author

Alok Jain

Alok designs digital experiences to help businesses achieve their goals. He is passionate about designing the right User Experience for their customers. For over 15 years, he has worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, or React.js, he follows the best product development practices for design and code, for desktop or mobile.

Leave a Reply

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