IE6下兼容position:fixed的问题

最新推荐文章于 2021-06-08 10:34:03 发布

最新推荐文章于 2021-06-08 10:34:03 发布 · 247 阅读

文章标签：

#浏览器 #CSS #HTML

css 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用CSS的position属性实现页面元素的固定位置布局。针对不同浏览器的支持情况，特别是IE6不支持position:fixed的问题，提供了兼容解决方案。通过示例代码展示了如何利用百分比高度自适应调整以及使用JavaScript动态计算高度。

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

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

一个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);		
}