在制作CMS模板过程中，有些客户想让页脚的内容不会跟随页面以前滚动，最简单的办法就是用JS实现，可是网页中有太多的JS就会造成搜索引擎的困扰，那么用CSS如何实现呢？
页面基本结构
CSS实现页眉页脚的基本原理就是将body元素撑满页面(100%), 然后再将页眉页脚浮动起来. 最后的滚动条借用body的滚动条, 而不再使用页面的滚动条.
先来基本结构:三个DIV分别是页眉, body^2, 页脚.
<div id="pinHeader"></div>
<div id="body2"></div>
<div id="pinFooter"></div>
CSS样式设计
首先, 我们要让 HTML 撑满浏览器窗口以隐藏默认的滚动条. 样式如下:
body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#fff;color:#222;font-size:14px;line-height:180%;}
让页眉页脚浮动起来:
#pinHeader,#pinFooter{position:absolute;left:-16px;width:100%;overflow:hidden;}
#pinHeader{top:0;height:75px;border-bottom:1px dashed #960;}
#pinFooter{top:100%;margin-top:-85px;height:87px;border-top:1px dashed #960;}
设置内容容器:
#body2{width:960px;margin:0 auto;height:auto;overflow:hidden;padding:75px 0 70px;}
第四步, 滚动条现身!
body{overflow:scroll;}
