frameset 给主框架添加滚动条

最新推荐文章于 2021-03-16 18:10:07 发布

白矮星

最新推荐文章于 2021-03-16 18:10:07 发布

阅读量4.5k

点赞数 2

分类专栏：前端开发

本文链接：https://blog.csdn.net/white_smile/article/details/19408799

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

之前做了一个Web项目，用到了frameset框架，具体设计如下：

<frameset rows="130,*" cols="*" frameborder="no" border="0" framespacing="0" >
    <frame src="page.htm" id="topFrame" name="topFrame" scrolling="no">
    <frameset cols="230,*" frameborder="NO" border="0" framespacing="0">
        <frame src="menu.htm" noresize id="menu" name="menu" scrolling="no" >
        <frame src="statistics.htm" noresize id="main" name="main" scrolling="no">
    </frameset>
</frameset>

后来发现当main.htm太大时，页面只有一部分出现滚动条，不论怎么设置frame中scrolling的属性，就是无法在整张页面上出现滚动条。在网上搜索了很多资料，最后网友所提及的<iframe>给了我提示，就尝试着用了一下，最后真的达到了自己所需要的效果。

解决方法很简单，就是先建一个页面，加个<iframe>，指向原先的页面就可以了。比如：

test.htm

<html>
<head>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<style>
body{
    scrollbar-base-color:#C0D586;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-shadow-color:DEEFC6;
    width:100%;
    height:1100px;
    margin:0px; 
    padding:0px
}
</style>
</head>
    <!--解决frameset滚动条的方法 -->
    <body>
	    <iframe src="main.htm" style="height:100%;width:100%;border-width: 0px; ">
       </iframe>
	</body>
</html>

main.htm

<html>
<head>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<style>
body{
    scrollbar-base-color:#C0D586;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-shadow-color:DEEFC6; 
}

</style>
</head>
<frameset rows="130,*" cols="*" frameborder="no" border="0" framespacing="0" >
    <frame src="top.htm" id="topFrame" name="topFrame" scrolling="no">
    <frameset cols="230,*" frameborder="NO" border="0" framespacing="0">
        <frame src="menu" noresize id="menu" name="menu" scrolling="no" >
        <frame src="${ctx}/user/toStaticis.do" noresize id="main" name="main" scrolling="no">
    </frameset>
</frameset>
<noframes>
	<body>您的浏览器不支持框架！</body>
</noframes>
</html>

最终出现的效果：