您现在的位置： 365建站网 > 365文章 > 让层固定,不随滚动条拖动而动

让层固定,不随滚动条拖动而动

文章来源：365jz.com 点击数：2932 更新时间：2010-01-21 22:36 参与评论

今天遇到两个问题
第一个是让页面不出现横向滚动条。当时是我们提供一张页面被IFRAME到另一个页面上。为了页面美观，我们必须控制页面的滚动条显示
这个问题的解决很方便
只要保证样式里对HTML的控制即可
<style>
/*设置不出现横向滚动条*/
html{overflow-x:hidden}
/*设置不出现纵向滚动条*/
html{overflow-y:hidden}
/*设置不出现滚动条*/
html{overflow:hidden}
</style>
但第二个问题整理了半天，即是让某个层固定在页面上某特定位置不动，而下面的层可以根据需要滚动起来。前提（html代码不能变）。当时也只用保证IE有效即可。
解决方案见下
css:


xhtml:
<!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>
.......
</head>
<body>
<div id="fav">
<div class="top-bar">
 供应信息
 求购信息
 公司
</div>
<div class="f-tab-b">主体内容</div>
</div>
</body>
</html>
后来收集了下别人的方案，其实如果结构可以改,也有其他的解决方案

[NextPage]

例1：view plaincopy to clipboardprint?
<html>
<head>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}</style>
</head>
<body scroll="no">
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;
&nbsxxxxxxxxcccccccccccccccccccxp;
 
&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;
&ncxvcxzvczxvcxzvczbsp;
 
 dfdf
&nbscxzvcxzvcxzvczxvcxzp;
 
 
&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;
 
 
&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;
 
 
 
 
 ddddddddddddddddd
 
 
 
 
 
&nbsxp;
 
 
&nbxsp;
 
 v
</div>
</body>
</html>
<html>
<head>
<mce:style type="text/css"><!--
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{

position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:2;
overflow:hidden;
}
--></mce:style><style type="text/css" mce_bogus="1">html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{

position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:2;
overflow:hidden;
}</style>
</head>
<body scroll="no">
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;
&nbsxxxxxxxxcccccccccccccccccccxp;
 
&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;
&ncxvcxzvczxvcxzvczbsp;
 
 dfdf
&nbscxzvcxzvcxzvczxvcxzp;
 
 
&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;
 
 
&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;
 
 
 
 
 ddddddddddddddddd
 
 
 
 
 
&nbsxp;
 
 
&nbxsp;
 
 v
</div>
</body>
</html>

例2：view plaincopy to clipboardprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:7;
 overflow:hidden;
}
#ToolBa_2{

 position:absolute;
 top:300px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index3;
 overflow:hidden;
 color:#fff;
}
#ToolBa_3{

 position:absolute;
 top:600px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index32;
 overflow:hidden;
 color:#fff;
}
#ToolBa_4{

 width:300px;
 height:200px;
 background:#ff0000;
 z-index35;
 overflow:hidden;
 color:#fff;
}
#ToolBa_5{

 width:300px;
 height:200px;
 background:#ff0000;
 z-index39;
 overflow:hidden;
 color:#fff;
}</style>
</head>
<body scroll="no">
<div id="ToolBar">固定在上方不动</div>

<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>

<div id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>

<div id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>

<div id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">

 
</div>
</body>
</html>

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (2932人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：24则CSS网页布局开发小技巧
下一篇：Firefox3,IE6,IE7,IE8上传图片预览

大家感兴趣的内容

让层固定,不随滚动条拖动而动

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询