之前做了一个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>
<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>