`
wlh269
  • 浏览: 449210 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div居中(滑动滚动条)

阅读更多
在滑动滚动条的情况下,div始终定位到当前窗口的中心!

<!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>div居中</title>
<style type="text/css">
body,html{height:100%;padding:0;margin:0;}
.divPanel{
    border:1px solid red;
    width:100px;
    height:100px;
    left:800px;
    top:20px;
    position:fixed;
    _position:absolute;
    _top:expression(eval( document.documentElement.clientHeight==0?(document.body.scrollTop):(document.documentElement.scrollTop))+20+"px");
}
#panel2{
    border:1px solid #339966;
    width:300px;
    width:300px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-50px;
    position:fixed;
    
    _position:absolute;
    _left:expression(eval(
        document.documentElement.clientHeight==0
        ?document.body.offsetWidth
        :document.documentElement.clientWidth
    )/2+"px");
   
    _top:expression(eval(document.documentElement.clientHeight==0?(document.body.scrollTop+document.body.clientHeight/2):(document.documentElement.scrollTop+document.documentElement.clientHeight/2))+"px");
}
</style>
</head>
<body>
<!--
<textarea id="txt1" rows="20" cols="60"></textarea>
<textarea id="txt2" rows="20" cols="60"></textarea>
<textarea id="txt3" rows="20" cols="60"></textarea>-->
<div id="panel" class="divPanel"></div>
<div id="panel2">dddd</div>
<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/>
</body>
</html>



分享到:
评论
1 楼 boygirl 2011-01-24  
IE6不兼容

相关推荐

Global site tag (gtag.js) - Google Analytics