http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page
方法一：
结构如下：
<div class="box">
<div class="hd">头部</div>
<div class="bd">内容区</div>
<div class="ft">尾部</div>
</div>
CSS注意事项：
1、html,body设置height:100%;清除margin和padding
2、box，相对定位，min-height:100%，
考虑到兼容性，如下设置：
/*标准浏览器*/
min-height:100%;
height:auto!important;
/*IE6*/
height:100%;
2、尾部，因为是在最下面显示，因此需要绝对定位并设置bottom:0;还需要设置100%;见蓝字。
3、内容区，padding-bottom需要等于尾部的height，这样文字就不会被尾部的内容盖住，见红字。
CSS代码如下：
html,body {
height: 100%;
margin:0;
padding:0;
}
.box {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
.hd {
height: 50px;
background: red;
}
.bd {
padding-bottom: 150px;
}
.ft {
position: absolute;
bottom:0;
100%;
height: 150px;
background: yellow;
}
方法二：
结构如下：
<div class="box">
<div class="hd">头部</div>
<div class="bd">内容</div>
</div>
<div class="ft">尾部</div>
CSS注意事项：
1、html,body设置height:100%;清除margin和padding
2、box，min-height:100%，
考虑到兼容性，如下设置：
/*标准浏览器*/
min-height:100%;
height:auto!important;
/*IE6*/
height:100%;
3、尾部，相对定位，margin-top为负数并等于height，见红字。
4、内部区，padding-bottom=尾部的height，见红字。
CSS代码如下：
html,body {
height: 100%;
margin:0;
padding:0;
}
.box {
min-height: 100%;
height: auto !important;
height: 100%;
}
.hd {
height: 50px;
background: red;
}
.bd {
padding-bottom:150px;
}
.ft {
position: relative;
margin-top:-150px;
height: 150px;
background: yellow;
}
方法三：
结构如下：
<div class="box">
<div class="hd">头部</div>
<div class="bd">内容区</div>
<div class="push"></div>
</div>
<div class="ft">尾部</div>
CSS注意事项：
1、html,body设置height:100%;清除margin和padding
2、box，min-height:100%，
考虑到兼容性，如下设置：
/*标准浏览器*/
min-height:100%;
height:auto!important;
/*IE6*/
height:100%;
3、box的margin-bottom的负值=尾部的高度，见红字。
4、.push主要是一个空标签，用于撑开尾部的高度，因此它的高度＝尾部的高度，见红字。
CSS代码如下：
html,body {
height: 100%;
margin:0;
padding:0;
}
.box {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-150px;
}
.hd {
background: red;
height: 50px;
}
.ft,.push {
height: 150px;
background: yellow;
}