<!-- 父层 -->

<div id="wapper">

    <!-- 主要内容 -->

    <div id="main-content">

    </div>

    <!-- 页脚 -->

    <div id="footer">

    </div>

</div>  

#wapper{

    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/

    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/

    min-height: 100%  /* IE6不支持，IE6要单独配置*/

}

#footer{

   position: absolute;  bottom:; /* 关键 */

   left:; /* IE下一定要记得 */

   height: 60px;         /* footer的高度一定要是固定值*/

}

#main-content{

   padding-bottom: 60px; /*重要！给footer预留的空间*/

}  

<!--[if IE 6]->

<style>

#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/

</style>

<![endif]-->