关于DIV滚动条的问题
一个关于DIV滚动条的问题,页面分为上、左、右三个部分,不希望用HTML的滚动条,希望右边也就是页面主体内容用一个DIV的滚动条,但现在代码在IE7下显示没有问题,但在IE6滚动条拖动不完整,DEMO如下,请大家帮看看
xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="ctl00_Head1">
<title>主页 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body id="GlobalBody">
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div id="PageHeader">
头部
</div>
<div id="PageContents">
<div id="ctl00_rs1_ra1" class="ResizableArea">
<div id="cLeftSection" class="LeftSection">
左则
</div>
<div class="Splitter">
</div>
<div id="cRightSection" class="RightSection">
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />页面主体<br />
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束
结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束<br />
</div>
</div>
</div>
</form>
</body>
</html>
对应的CSS文件
html{height:100%;max-height:100%;padding:0;margin:0;border:0;overflow:hidden;}
body {margin:0px;border:0;padding:0;height:100%;max-height:100%;font:12px "宋体"; color:#000;overflow:hidden;}
#PageHeader{position:absolute;width:100%;height:100px;top:0;background:transparent;}
#PageContents{position:absolute;top:103px;left:0;bottom:0;right:0;background:transparent;z-index:1;}
* html #PageContents{height:100%;width:100%;}
.ResizableArea{width:100%;height:100%;display:Block;border:none;background:transparent;position:absolute;bottom:0;top:0;}
* html .ResizableArea{width:100%;display:Block;border:none;background:transparent;position:relative;bottom:0;height:auto;top:0;}
/*******下部左则区域*******/
.ResizableArea .LeftSection{display:block;float:left;position:relative;width:222px;height:100%;margin:0px 6px 0px 0px;padding:0;overflow:auto;z-index:2;}
* html .ResizableArea .LeftSection{display:block;float:left;position:relative;width:222px;height:100%;margin:0px 3px 0px 0px;padding:0;overflow:auto;z-index:2;}
/****Splitter****/
.ResizableArea .Splitter{width:4px;position:absolute;display:block;cursor:e-resize;left:223px;height:100%;margin:0;padding:0;z-index:20;background-position:center;background-repeat:no-repeat;vertical-align:middle;background-image:url('/platform/controls/resizablearea/resources/lib_grippy.gif'); background:#ffeeaa; }
* html .ResizableArea .Splitter{width:4px;position:absolute;display:block;cursor:e-resize;left:223px;height:100%;margin:0;padding:0;z-index:20;background-position:center;background-repeat:no-repeat;vertical-align:middle;background-image:url('/platform/controls/resizablearea/resources/lib_grippy.gif');background:#ffeeaa;}
.ResizableArea .RightSection{overflow:auto;height:100%;border:0 none orange;margin:0;padding:0;background:white;position:static;z-index:10;}