效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>fixed ie6</title><style type="text/css">body{background-image:url(about:blank); background-attachment:fixed;/*必要，防抖动*/}.head,.foot{position:fixed !important;/*ie7 ff*/position:absolute;z-index:21;background:#999;height:30px;width:500px;}.foot{bottom:0 !important;/*ie7 ff*/}.main{height:2000px;}</style><!--[if IE 6]><style type="text/css">/*ie6 fix顶端元素*/.head{top:expression(eval(document.documentElement.scrollTop));}/*ie6 fix底端元素*/.foot{top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));}</style><![endif]--></head><body><div>header</div><div><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p></div><div>foot</div></body></html>
提示：您可以先修改部分代码再运行
为了兼容ie6(万恶的东西),用的是expression的方法
在页头加入：
<style type="text/css">
body{
background-image:url(about:blank); background-attachment:fixed;/*必要，防抖动*/
}
.head,.foot{
position:fixed !important;/*ie7 ff*/
position:absolute;
z-index:21;
background:#999;
height:30px;
width:500px;
}
.foot{
bottom:0 !important;/*ie7 ff*/
}
.main{
height:2000px;
}
</style>
<>
HTML:
<body>
<div>
header
</div>
<div>
<p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p>
</div>
<div>
foot
</div>
</body>
【css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法】相关文章：
★ CSS兼容IE6、IE7、IE8和Firefox浏览器的方法