只有这对我有用(但对于“同一域”):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

你可以使用任何一种:

MakeIframeFullHeight(document.getElementById("iframe_id"));

or

<iframe .... onload="MakeIframeFullHeight(this);" ....

以下测试工作

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

另一种构建流体全屏iframe的方法:

当页面加载时，嵌入式视频填充整个视口区域

很好的方法登陆页面与视频或任何嵌入式内容。您可以有任何额外的内容下面嵌入视频，这是显示时，滚动页面向下。

例子:

CSS和HTML代码。

body { margin: 0; background-color: #E1E1E1; } header { width: 100%; height: 56vw; max-height: 100vh; } .embwrap { width: 100%; height: 100%; display: table; } .embwrap .embcell { width: auto; background-color: black; display: table-cell; vertical-align: top; } .embwrap .embcell .ifrwrap { height: 100%; width: 100%; display: inline-table; background-color: black; } .embwrap .embcell .ifrwrap iframe { height: 100%; width: 100%; } <header> <div class="embwrap"> <div class="embcell"> <div class="ifrwrap"> <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe> </div> </div> </div> </header> <article> <div style="margin:30px; text-align: justify;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p> <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p> </div> </article>

创建全屏iframe的3种方法:

Approach 1 - Viewport-percentage lengths In supported browsers, you can use viewport-percentage lengths such as height: 100vh. Where 100vh represents the height of the viewport, and likewise 100vw represents the width. Example Here body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; } <iframe></iframe>

方法2 -固定定位 这种方法相当简单。只需设置固定元素的位置，并添加100%的高度/宽度。 例子 iframe { 位置:固定; 背景:# 000; 边界:没有; 上图:0;右:0; 底部:0;左:0; 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >

方法3 对于最后一种方法，只需将body/html/iframe元素的高度设置为100%。 例子 Html, body { 高度:100%; 保证金:0;/*重置body元素*/的默认边距 ｝ iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >

如果你的父元素<div>用这里提到的多重解填充高度。

那你也可以用

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>

http://embedresponsively.com/

这是一个很好的资源，我用过几次，效果很好。创建以下代码....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>