您的位置：首页 > 其它

解决iframe出现两个滚动条的问题

2015-07-21 17:53 375 查看

花了一个多小时，终于解决了因为iframe框架出现两个滚动条的问题。原理( 借鉴了网上kaka的思路，但是js与他写的不一样)是：

1.强制隐藏最上层窗口的滚动条

2.获取浏览器窗口的高度

3.用浏览器窗口的高度减去头部iframe的高度就是内容iframe的高度了

<head>
<title>main</title>
<script type="text/javascript" src="<c:url value='/adminjsps/js/jquery-1.7.2.min.js'/>"></script>
<script type="text/javascript">

$(function(){

var ht = $(window).height();//获取浏览器窗口的整体高度；

var top = $("#top").height();//获取头部高度，定义一个变量名为topHeader

var btop = ht - top;
// 计算bottom的高度

$("#tree").css("height",btop);

$("#body").css("height",btop);

});
</script>
<style type="text/css">

*{margin:0; padding:0; font-family:'微软雅黑';}

html{overflow:hidden;}
/*强制去掉主页面的滚动条*/

.cont{width:100%; height: 100%; over-flow:hidden;}

iframe{width:100%; height:100%;}

.top{width:100%; height:78px; }

.bottom{width:100%; float:left;}

.bottom .tree{width:16%; height: 100%; over-flow:hidden; float:left; margin-left:1%;}

.bottom .body {width: 80%; height: 100%; float:left; margin-left:1%; }
</style>
</head>
<body>
<div class="cont">

<div class="top">

<iframe frameborder="0" src="<c:url value='/adminjsps/jsps/header/header.jsp'/>" name="top" id="top"></iframe>

</div>

<div class="bottom">

<div class="tree">

<iframe frameborder="0" src="<c:url value='/adminjsps/jsps/left/left.jsp'/>" name="tree" id="tree"></iframe>

</div>

<div class="body">

<iframe frameborder="0" src="<c:url value='/adminjsps/jsps/bodysample.jsp'/>" name="body" id="body"></iframe>

</div>

</div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航