<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>footer pin to bottom of page </title>
<script type= "Text/javascript" src= "Js/jquery-1.9.1.min.js" ></script>
<style type= "Text/css" >
html,body{margin:0;padding:0;height:100%}
. Container{min-height:100%;height:auto!important;height:100%;/*ie6 does not recognize min-height, such as the above processing */position:relative;}
. Header{background: #ff0;p adding:10px;}
. page{width:960px;margin:0 auto;padding-bottom:60px;/*padding equals the height of footer */}
. Footer{position:absolute;bottom:0;width:100%;height:60px;/*footer height */background: #6cf; clear:both;}
. Left{width:220px;float:left;margin-right:20px;background:lime;}
. content{background:orange;width:480px;float:left;margin-right:20px;}
. Right{width:220px;float:right;background:green;}
. Clearfix:after,
. Clearfix:before{content: "";d isplay:table}
. Clearfix:after{clear:both;overflow:hidden}
. Clearfix{zoom:1;}
</style>
<body >
<div class= "Container" >
<div class= "Header" > This is the head </div>
<div class= "Page Clearfix" >
<div class= "left" >left sidebar</div>
<div class= "Content" >main content</div>
<div class= "right" >right sudebar</div>
</div>
<div class= "Footer" >footer section</div>
</div>
</body>