两种解决IE6不支持固定定位的方法
有两种让IE6支持position:fixed
1.用CSS执行表达式
*{margin:0;padding:0;}
* html,* html body{
background-image:url(about:blank);
background-attachment:fixed;
}
* html .fixed{
position:absolute;
bottom:auto;
top:eval(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
}
.fixed{
position:fixed;
bottom:0px;
top:auto;
}
2.让body保持其原有高度，让html只有一个窗口那么高
*{margin:0;padding:0}
*html{overflow:hidden;}
*html body{height:100%;overflow:auto;}
.fixed{
position:fixed; _position:absolute;
left:0;
bottom:0;
}
第二种方法有个缺点 就是页面内容高度超出浏览器一屏的话 就被隐藏 。建议在 内容为浏览器一屏内使用
3.纯CSS解决方案
<title>纯css方案</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
overflow:hidden
}
.body
{
height:100%;
overflow:auto;
}
.fixed_box
{
width:100%;
height:100px;
position:absolute;
bottom:0;
z-index:1000;
border:1px solid black;
background:#eee;
line-height:100px;
text-align:center;
}
</style>
</head>
<body>
<div class="fixed_box">嗯嗯 就是我被固定了</div>
<div class="body">
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
<p>内容很多 很长</p>
</div>
- Google Chrome 浏览器支持的 CSS 选择器(2009-10-27 15:46:33)
- 可以给img元素设置背景图 (2009-10-27 15:45:33)
- 如何快速定位页面中复杂 CSS BUG 问题(2009-10-27 15:43:37)
- display:inline-block的深入理解-CSS 表现(2009-10-27 15:30:36)
- input的用法(2009-10-16 16:47:43)
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。