網頁制作Poluoluo文章簡介：兼容ie6,ie7,ff的fixed,元素上下端固定定位方法.
效果地址：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：http://xiebiji.com/2009/09/fixed
為了兼容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>
<!--[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]-->
HTML:
<body>
<div class="head">
header
</div>
<div class="main">
<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 class="foot">
foot
</div>
</body>