是否所有浏览器都支持iframe height=100% ?

我使用doctype作为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在我的iframe代码中,如果我说

<iframe src="xyz.pdf" width="100%" height="100%" />

我的意思是它是否会取剩下的页面的高度(因为上面有另一个固定高度为50px的帧) 所有主流浏览器(IE/Firefox/Safari)都支持这个功能吗?

同样关于滚动条,即使我说scrolling="no",我也能在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置iframe高度?


当前回答

根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe,百分比值不再被允许。 但下面的方法对我很有效

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

虽然宽度:100%可行,但高度:100%行不通。所以窗口。innerHeight已被使用。你也可以用css像素来表示高度。

工作代码:Link工作地点: 链接

其他回答

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

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 src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

我遇到了同样的问题,我拉一个iframe到一个div。试试这个:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

高度设置为100vh,代表视口高度。此外,宽度可以设置为100vw,尽管你可能会遇到问题,如果源文件是响应性的(你的帧将变得非常宽)。

<iframe src="" style=" font - family:宋体;位置:绝对的;边界:没有“> < / iframe >

尝试使用jquery,

$('iframe').on('`enter code here`load', function(){
   $(this).css('height', $(this).contents().find('body').height());
});