作为一个网站开发人员,在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的"footer"部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部(fixed)，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。

解决方案

//HTML部分
<div id="bigWrap">
    <div id="mainWrap">页面正文</div>
</div>

<div class="footer"></div>


//CSS部分
html,body{margin:0;padding:0;height:100%;}

#bigWrap{
    min-height:100%; /*使内容高度和body一样*/
	height: auto !important; 
	height: 100%; /*IE6不识别min-height*/
    margin-bottom:-80px;/*向上缩减80像素(也可底部向上增加)，不至于footer超出屏幕可视范围*/
}

#mainWrap {
    padding-bottom:50px; /*处理页面高度超出屏幕可视范围时，控制内容和底部高度之间距离*/
}
#footer {
    height:80px;
}

针对的问题：当页面内容(#container)高度不足以撑开浏览器高度时，有时会出现页脚(footer)跟随内容的底部，而不是我们希望的始终显示在(浏览器)页面的底部。如果使用fixed的时候，又一直漂浮在上面会存在遮挡以及不美观(网站版权信息)。

可参考信息：http://www.jb51.net/web/76954.html

如果爱一定要有一个期限！我希望是周而复始生生不息。