Sometimes for a short-content page the footer climbs up and leaves a blank space at the bottom of the page. This looks ugly when content becomes small in height. But, as the name depicts itself, footer should be at the foot/bottom of the page. This post will help you tune the page and css to make the footer stick to the bottom regardless of content height. Not to mention, the footer will go down like normal when content exceeds the view-port height. The solution is to force the footer down to the bottom of the page for smaller contents.

I will show you two separate methods for achieving the solution. Two methods slightly varies in their html structure. Adopt anyone according to your current page structure.

 

First method

html structure

<div id="container">
<div id="header"> </div>
<div id="body"> </div>
<div id="footer"> </div>
</div>

And the css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#container {
    min-height: 100%;
    position: relative;
    _height: 100%;          /* _ IE6 hack */
}
#header {
    background: #ff0;
    padding: 10px;
}
#body {
    padding: 10px;
    padding-bottom: 60px;   /* Height of the footer */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;           /* Height of the footer */
    background: #6cf;
}

Mind the IE6 hack for "container" element. IE6 does not recognize min-height. But instead treats height as min-height.

 

Second method

html structure

<body>
    <div class="wrapper">
        ...
        <div class="push"> </div>
    </div>
    <div class="footer"> </div>
</body>

And css

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}
.footer, .push {
    height: 50px;
}

Mind the "push" element. It will act like a padding for the wrapper element so that contents don't go below footer.

 


Compatibility: both method works fine for all major browsers including IE6+
Note: Both method requires footer to have a fixed height value
Disclaimer: this is just an accumulation of various methods developed by others.

Comments

ron's picture

Thanks for the nice write ups!

Implemeted right away for one of our projects.

Add new comment