解决iframe高度自适应

原因

iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。

第一种方法

这个方式更适用于嵌套的页面，当嵌套多个iframe时，比如左侧有个侧边栏，右侧是个大的iframe，这个大的iframe又嵌套了一层：中间是iframe，但是右侧又有个侧边栏，这时候不想让iframe单独滑动（避免页面出现两个滚动条），而是想整个页面一起滑动时，用这个方法。

html代码： 注意一定要写height=‘100%’ scrolling=‘no’ width='100%'

否则iframe会自己滑动

第二种方法

这个方法更简单些，适用于左侧有个侧边栏，右侧是iframe，并且iframe可以自己滑动，只在页面高度变化时重新赋值即可。

让iframe自适应浏览器的高度和宽度的具体步骤如下：

1、首先设置样式：body{margin:0; padding:0;}。

2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。html代码如下：<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>。

3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就不出来了，也就是本文开头讲的。需要再次刷新，那就不属于自适应了。代码是：

var ifm= document.getElementById("myiframe");