iframe出现双层滚动条解决方案

zZoOoOJaVa 2014-06-24

在开发中出现一个iframe双滚动条问题,查了很多资料,网上的解决方案是定义iframe的onload事件,加载时重新加载高度,但是由于项目中页面渲染完成后,点击按钮动态生成数据,这时候上面的方案就不可行了。

下面是通过jquery.layout.js来解决双滚动条问题。

html代码

<body >
		<div id="mainFrameDiv" class="tabqh ui-layout-north">
			<div class="menu">
                 <ul id="tabs">
					<div id="liText"><div>
                 </ul>
			</div> 
		</div>
		<div class="ui-layout-center" >
			<iframe src="" frameborder="0" id="bottom_frame" name="bottom_frame" width="100%"
				height="100%"></iframe>
		</div>
</body>

 同时引入下面js文件

<script type="text/javascript"  src="<%=request.getContextPath()%>/jquery/plugin/layout/jquery.layout.js"></script>

在初始化时执行

$(document).ready(function () { 
       $('body').layout({
			north: {
					size:40,
					spacing_open:0,
					closable:false,
					resizable:false
			},
			center: {
					size:20,	
					spacing_open:0
			}
		});
})

 下面是效果图

相关推荐

翟浩浩Android / 0评论 2015-01-12