Question

怎么让iframe自适应浏览器的高度和宽度

Answer 1

1、在文件夹里创建两个html文件，一个“index”一个“iframe”。

2、在index中添加一个iframe标签，直接嵌入iframe页面。

3、在iframe网页中添加了两个固定高度的div内容。

4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。

5、现在我们在index页面的iframe标签再添加如下的属性。

6、再次打开index页面iframe已经高度自适应了。

Answer 2

宽度可以设置100%但高度用不行了，~ 可以通过jquery获取下父级的高度，赋值给iframe $(ifra

Answer 3

<iframe scrolling="no" name="aa" frameborder="0" src="bb.html" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)"></iframe>

iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

Answer 4

　　<iframe scrolling="no" name="aa" frameborder="0" src="bb.html" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)"></iframe>

iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

Answer 5

其他地方找来的自适应窗口高度，宽度应该100%就没事了。
先在iframe放一句onload，以便一打开就适应大小
<iframe src="" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>
然后添加一段JS代码，就是那个onload事件响应的function

function changeFrameHeight(){
var ifm= document.getElementById("iframepage");
ifm.height=document.documentElement.clientHeight;
}
下面这个也放进JS代码，窗口ReSize事件的时候重新设定高度
window.onresize=function(){
changeFrameHeight();
}
clientHeight是整个窗口可显示内容的高度，如果不止一个iframe或者还有div等容器，可以用clientHeight减掉其他容器的高度。
Win7 IE11测试没问题