本文介绍了解决页面中主要内容区域嵌入iframe高度控制问题的方法，包括使用JavaScript代码实现iframe高度动态调整，并在窗口大小变化时重新计算iframe高度，避免出现多余的滚动条和iframe高度不可控的问题。
- 近期遇到页面中主要内容区域嵌入iframe高度控制问题（主页面为上下结构，上为菜单+下为iframe内容），该问题导致iframe和父页面都会出现滚动条，以及iframe的高度不可控
- 最后用这段代码搞定：
var h = document.documentElement.clientHeight - 50;
var ifr = document.getElementById('frm');
ifr.height = h;- iframe代码：
<div>
<iframe id="frm" scrolling="yes" frameborder="0" name="frm" width="100%" src="content.html"></iframe>
</div>- 需要注意的是，如果改变窗口的大小则还是会出现多余滚动条以及iframe高度的问题，所以需要加入：
window.onresize = function(){
var ifr = document.getElementById('frm');
ifr.height = 0;
var h = document.documentElement.clientHeight - 50;
ifr.height = h;
};- 需要声明DOCTYPE，才能使用document.documnetElement
- 之前我用的是“document.body.scrollHeight”，只有在谷歌上好使，IE和FF都不好使
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
