页面显示滚动条

0 0

页面显示滚动条0

现在有个框架页面

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <style>
    
    </style>
    <frameset cols="50%,50%" frameborder="0" noresize="noresize">
       <frameset name="homeLeft" frameborder="0" rows="320,*" cols="*" noresize="noresize">
           <frame src="xxxx" noresize="noresize" scrolling="no"/>
           <frame src="xxxx" noresize="noresize" scrolling="no"/>
       </frameset>
       <frameset name="homeRight" frameborder="0" rows="45%,*,25%" cols="*" noresize="noresize">
           <frame src="xxxx" noresize="noresize" scrolling="no"/>
           <frame src="xxxx" noresize="noresize" scrolling="no"/>
           <frame src="xxxx" noresize="noresize" scrolling="no"/>
       </frameset>
       <noframes>
       <body>Your browser does not handle frames!</body>
       </noframes>
    </frameset>
</html>

请问一下，如何让这个页面显示一个整体的滚动条。而不是每个frame单独显示滚动条。上下和横向的都需要。

2014年7月21日 16:43

Fox_ed
2
0 0 4

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <style>
         #first{
        background-color:#00FFFF;
        width:200px;
        height:100px;
        overflow:scroll;

         }

            #second{
        background-color:#00FFFF;
        width:200px;
        height:50px;
        overflow-y: hidden;
        overflow-x: hidden;

         }

                #third{
        background-color:#00FFFF;
        width:200px;
        height:50px;
        overflow-y: hidden;
        overflow-x: hidden;

         }

          #four{
        background-color:#00FFFF;
        width:200px;
        height:50px;
        overflow-y: hidden;
        overflow-x: hidden;

         }
    </style>
    <frameset cols="50%,50%" frameborder="0" noresize="noresize">
       <frameset name="homeLeft" frameborder="0" rows="320,*" cols="*" noresize="noresize">
           <frame id="four" src="xxx" noresize="noresize" scrolling="no"/>
           <frame src="xxx" noresize="noresize" scrolling="no"/>
       </frameset>
       <frameset id="five" name="homeRight" frameborder="0" rows="45%,*,25%" cols="*" noresize="noresize">
           <frame id="first" src="xxx" noresize="noresize" scrolling="no"/>
           <frame id="second" src="xxx" noresize="noresize" />
           <frame id="third" src="xxx" noresize="noresize" scrolling="no"/>
       </frameset>
       <noframes>
       <body>Your browser does not handle frames!</body>
       </noframes>
    </frameset>
</html>

看是不会要这样的效果最好有具体的页面不然老弹找不到页面

2014年7月22日 03:10

lao1984wang
617
0 0 24

添加评论

0 0

这个要使用<iframe>标签，具体如下：

创建2个html文件，include.htm和index.htm,将下述代码放入相应的文件内，打开index.htm即可看到你要的效果。（要是看不到效果可以调整下index的宽度和高度，我在chrome下测试没问题）。

include.htm

<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title></title>  
    </head>  
    <style>  
      
    </style>  
    <frameset cols="50%,50%" frameborder="0" noresize="noresize">  
       <frameset name="homeLeft" frameborder="0" rows="320,*" cols="*" noresize="noresize">  
           <frame src="xxxx" noresize="noresize" scrolling="no"/>  
           <frame src="xxxx" noresize="noresize" scrolling="no"/>  
       </frameset>  
       <frameset name="homeRight" frameborder="0" rows="45%,*,25%" cols="*" noresize="noresize">  
           <frame src="xxxx" noresize="noresize" scrolling="no"/>  
           <frame src="xxxx" noresize="noresize" scrolling="no"/>  
           <frame src="xxxx" noresize="noresize" scrolling="no"/>  
       </frameset>  
       <noframes>  
       <body>Your browser does not handle frames!</body>  
       </noframes>  
    </frameset>   
</html>

index.htm

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  
</style>  
</head>  
<body>
<iframe src="./include.htm" scrolling="yes" width="1600" height="800" frameborder="1">
</iframe>
</body> 
 
</html>

2014年7月21日 19:37

hae
141
0 1 14

添加评论

0 0

考虑把frameset框架嵌入到另一个页面，在嵌入的主页面上控制滚动样式。

2014年7月21日 17:20

rmzdb
170
0 0 17

添加评论

0 0

<!DOCTYPE html>
<html>
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:200px;
height:100px;
overflow:scroll;
}


</style>
</head>

<body>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

</body>
</html>

2014年7月21日 17:11