html随着页面大小框架改变,html iframe自适应高度 可随着窗口大小改变|三体教程...

html iframe自适应高度 让浏览器兼容可随着窗口大小改变2017-10-12 21:36

关于今天的“iframe自适应高度”这篇文章，小编很久以前就有写过，不过是发表在另外的网站上面。

今天刚好又碰到这问题，把之前的都忘了，于是就又去百度搜索，没想到就找到了之前的文章。

稍微改动一下内容，再分享出来，要不然百度会说是采集的了。

在解决“iframe自适应高度”的问题之前，我们先说一下在其中遇到的问题。

1、当高度自适应的时候，窗口改变时会出现滚动条。

2、当窗口放大时，iframe并没有跟随自动改变大小，而是像一个大窗口包着一个小窗口一样。

为了让iframe看起来美观，就得让iframe自适应，说起来最苦的就是我们编程的了。

先来看看解决方法吧！

我们需要先设置样式：

body{margin:0; padding:0;}

如果不将body的margin和padding设置为0，页面显示的时候上下左右会出现几像素的空白。

然后就是下面的代码：

考虑到小伙伴们并不是全都有使用jquery，就直接用js讲解。

完整实例 html代码

body{margin:0;}

iframe{border:none; margin:0 0; width:100%;}

function changeFrameHeight(){

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

ifm.height=document.documentElement.clientHeight;

}

window.οnresize=function(){

changeFrameHeight();

}

亲自测试一下

在上面的代码中我们使用了window.onresize，也就是当窗口大小改变的时候触发，然后去执行changeFrameHeight()函数。

在函数中，我们使用clientHeight获取可视区域的高度，再修改iframe的高度就达到“iframe自适应高度”的效果了。