作为一个网站开发人员,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部(fixed),换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。
解决方案
//HTML部分
//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
如果爱一定要有一个期限!我希望是周而复始生生不息。