如何使 iframe 高度 等于 浏览器窗口高度

<iframe id="iframe" src="URL"></iframe>

第一种方法：CSS

<style type="text/css">

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

</style>

第二种方法：Javascript

<script type="text/javascript">

windowonload = function() {

var iframe = documentgetElementById("iframe");

iframestylewidth = windowinnerWidth + 'px';

iframestyleheight = windowinnerHeight + 'px';

};

</script>

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

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

2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。

代码如下：<iframe src=://fulibac id="myiframe" scrolling="no" frameborder="0"></iframe>。

3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就不出来了，也就是本文开头讲的。

需要再次刷新，那就不属于自适应了。

代码是：

var ifm= documentgetElementById("myiframe");

ifmheight=documentdocumentElementclientHeight;

function getWH(){

var wh = {};

"Height Width"replace(/[^\s]+/g,function(a){

var b = atoLowerCase();

wh[b]=window["inner"concat(a)]||

documentcompatMode ==="CSS1Compat" && documentdocumentElement["client"concat(a)]

|| documentbody["client"concat(a)];

});

return wh;

}

了解两个名词：BackCompat 标准兼容模式关闭（怪异模式）

CSS1Compat 标准兼容模式开启

这个方法为获取页面可视区域的高度，普通情况下，windowinnerHeight 即可获取，如果是正常模式，并且有clientHeight的情况下， documentdocumentElementclientHeight 获取的就是可视区域高度。在怪异模式下，是使用documentbody获取。

function getBodyWH(){

var wh = {};

"Height Width"replace(/[^\s]+/g,function(a){

var b = atoLowerCase();

wh[b]=documentcompatMode ==="CSS1Compat" && documentdocumentElement["scroll"concat(a)]

|| documentbody["scroll"concat(a)];

});

return wh;

}

这个为获取页面的高度，用于iframe的自适应时候获取。

var ss = {};

ssscrollTopFn = function(arg){

var a = navigatoruserAgenttoLowerCase()indexof("webkit");//判断webkit内核

var scrollTop;

if(a>-1||documentcompatMode =="BackCompat"){

thisscrollTopFn =function(arg){

if(typeof arg == 'number'){

documentbodyscrollTop = arg;

}else{

return documentbodyscrollTop;

}

}

}else{

thisscrollTopFn =function(arg){

if(typeof arg == 'number'){

documentdocumentElementscrollTop = arg;

}else{

return documentdocumentElementscrollTop;

}

}

}

return thisscrollTopFnapply(this,arguments);

}

以上就是关于如何使 iframe 高度 等于 浏览器窗口高度全部的内容，包括:如何使 iframe 高度 等于 浏览器窗口高度、怎么让iframe自适应浏览器的高度和宽度、如何获取页面可视区域的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！