How to make the footer stick to the bottom of a page

The footer on a web page begins where the main page content ends. Unlike the page header which always sticks to the top of the page irrespective of the page size, the position of the footer depends on the amount of content the page carries.

While this is no problem for pages with lots of content, but when a page doesn’t have enough content to cover the entire height of the monitor screen the footer doesn’t appear exactly at the foot of the page. It appears just where the page content ends, often midway. This looks bad from a design perspective.

One solution to this problem is to apply a “Sticky Footer” code. There are many sticky footer hacks but most of them are old and fails on newer browsers. The following solution proposed by CSSStickyFooter.com has been reportedly tested on over 50 browsers.

In a typical page structure the footer element sits inside the page wrapper. In this sticky footer code, the footer <div> sits outside of the wrap <div> like this.

<div id="wrap"> 
             <div id="main"> 
             </div>
</div>

<div id="footer">
</div>

If your page has the footer inside the wrap element, have it moved outside it as shown.

Now add the following code to the stylesheet.

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

And on your html page you will need this conditional, primarily for IE8;

<!--[if  IE 8]>
    <style type="text/css">
        #wrap {display:table;}
    </style>
<![endif]—>

Test your page in a browser – the footer should rest at the bottom of the page.

For explanation and known issues, read this.