css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法_ Div+Css教程-查字典教程网
css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
发布时间:2016-12-27 来源:查字典编辑
摘要:效果fixedie6body{background-image:url(about:blank);background-attachment...

效果

<!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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类