IE6下兼容position:fixed的问题

做网页时经常会有让某个层浮动在浏览器窗口的固定位置不变的需求(如图)。

当出现滚动条时，移动上下滚动条时层相对浏览器边框的距离也不变。

一个position:fix就可以解决，只是ie6到目前为止还不支持这个position属性。

 

 

<div id="fixed">
    我不会动
</div>
<div id="body">
	<p>test1</p>
	<p>test2</p>
	<p>test3</p>
	<p>test4</p>
	<p>test5</p>
	<p>test6</p>
	<p>test7</p>
	<p>test8</p>
	<p>test9</p>
	<p>test10</p>
</div>

 

原理：

用#body层模拟body，固定层#fixed放到#body外面.

ie6用绝对定位postion:absolute，相对浏览器窗口,定义left，right，bottom，top

其他浏览器用postion:fixed，相对浏览器窗口,定义left，right，bottom，top

 

1.如果#fixed的高度是百分比(例如10%)，那#body的高度也是百分比(例如90%)。

定义left:0;bottom:0.

只用css就可以达到：当改变浏览器的大小时，每个层的高度会自适应的。

<style type="text/css">
<!--
/*隐藏边距*/
body,div,p{margin:0;padding:0;}
html,body{height:100%; width:100%; overflow:hidden;}  

/*用div伪装body*/
div#body{
	position:relative;
	width:100%;
	height:90%;
	overflow-y:auto;
	overflow-x:hidden;
	background:#bbb;
}

/*悬停的元素 id=fixed*/
div#fixed{
	z-index:10;
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	height:10%;
	background:#000;
	color:#fff;
	text-align:center; 
	_position:absolute;
}

p{
	line-height:50px;
	padding-left:20px;
}
-->
</style>

 

2.如果fixed的高度是固定值(50px)，那body的高度是固定值(浏览器可视区域高度-50px)。

此时position:fixed已经没有意义了。

需要用js动态获取每个浏览器可视区域的高度，然后减去50px，最后把相减后的高度值赋给#body。

用resize事件，当浏览器窗口大小改变时就触发resize事件，重新获取高度。

$(document).ready(function(){	
	$(window).resize(function(){
		resizeEvent();
	});
	resizeEvent();
});
function resizeEvent(){
	var bodyHeight = $("body").height() - 50;
	$("div#body").height(bodyHeight);		
}

评论

3 楼 comasp 2009-01-16  

ie6还是用js动态 改变。

2 楼 ice-cream 2009-01-15  

ls的意见非常不错，平时都只关注html有没有通过w3c而忽略了css有没有通过w3c。
刚装好了测css的插件，以后多留意。

1 楼 hozaka 2009-01-15  

一般情况下我会这样写

.fixed {
  position: fixed !important;
  position: absolute;
}

看起来比较爽，总觉得各种各样的符号很不舒服，而且能通过W3C Validation。