五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 讓層固定,不隨滾動條拖動而動

讓層固定,不隨滾動條拖動而動

文章來源：365jz.com     點擊數(shù)：2952    更新時間：2010-01-21 22:36   參與評論

今天遇到兩個問題
第一個是讓頁面不出現(xiàn)橫向滾動條。當時是我們提供一張頁面被IFRAME到另一個頁面上。為了頁面美觀，我們必須控制頁面的滾動條顯示
這個問題的解決很方便
只要保證樣式里對HTML的控制即可
<style>
/*設(shè)置不出現(xiàn)橫向滾動條*/
html{overflow-x:hidden}
/*設(shè)置不出現(xiàn)縱向滾動條*/
html{overflow-y:hidden}
/*設(shè)置不出現(xiàn)滾動條*/
html{overflow:hidden}
</style>
但第二個問題整理了半天，即是讓某個層固定在頁面上某特定位置不動，而下面的層可以根據(jù)需要滾動起來。前提（html代碼不能變）。當時也只用保證IE有效即可。
解決方案見下
css:
 <!--[if IE 6]>  
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.top-bar{position:absolute;}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
.top-bar{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
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">
  <p class="w4"><span class="f-tab-t current">供應(yīng)信息</span></p>
  <p class="w4"><span class="f-tab-t">求購信息</span></p>
  <p class="w2"><span class="f-tab-t">公司</span></p>
 </div>
 <div class="f-tab-b">主體內(nèi)容</div>
</div>
</body>
</html>
后來收集了下別人的方案，其實如果結(jié)構(gòu)可以改,也有其他的解決方案

[NextPage]

例1：view plaincopy to clipboardprint?
<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"><!-- scrol="no" IE中必須 --> 
<div id="ToolBar">固定在上方不動</div> 
<div id="Main"> 
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p> 
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p> 
<p> </p> 
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p> 
<p>&ncxvcxzvczxvcxzvczbsp;</p> 
<p> </p> 
<p> dfdf</p> 
<p>&nbscxzvcxzvcxzvczxvcxzp;</p> 
<p> </p> 
<p> </p> 
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p> 
<p> </p> 
<p> </p> 
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> ddddddddddddddddd</p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p>&nbsxp;</p> 
<p> </p> 
<p> </p> 
<p>&nbxsp;</p> 
<p> </p> 
<p> </p>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"><!-- scrol="no" IE中必須 -->
<div id="ToolBar">固定在上方不動</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p> </p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p> </p>
<p> dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p> </p>
<p> </p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p> </p>
<p> </p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> ddddddddddddddddd</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>&nbsxp;</p>
<p> </p>
<p> </p>
<p>&nbxsp;</p>
<p> </p>
<p> </p>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"><!--  
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;  
}  
--></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"><!-- scrol="no" IE中必須 --> 
<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"> 
 
<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><br><br> 
</div> 
</body> 
</html> 

 

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點擊進入論壇

發(fā)表評論 (2952人查看，0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴禁發(fā)布色情、暴力、反動的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號