Method 1:
<div class= "Footer" >
</div>
. footer{
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute;
_top:expression (Documentelement.scrolltop + documentelement.clientheight-this.offsetheight);
overflow:visible;
}
Method 2:
CSS Sticky Footer, derived from: http://www.cssstickyfooter.com/using-sticky-footer-code.html
<div id= "Wrap" >
<div id= "Main" >
</div>
</div>
<div id= "Footer" >
</div>
* {margin:0;padding:0;}
HTML, body {height:100%;}
#wrap {min-height:100%;}
#main {overflow:auto;padding-bottom:180px;}
#footer {position:relative;margin-top: -180px;height:180px;clear:both;}
/*opera fix*/
Body:before {
Content: "";
height:100%;
Float:left;
width:0;
margin-top:-32767px;
}
<!--[if! IE 7]>
<style type= "Text/css" >
#wrap {display:table;height:100%}
</style>
<! [endif]-->
Both of these methods can also be used for navigation at the top.
Fixed navigation (Sticky nav)