是否所有浏览器都支持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高度?


当前回答

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>

其他回答

根据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工作地点: 链接

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

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

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

要获得一个全屏iframe,而iframe内没有滚动条,请使用以下css。不需要别的了

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }

当iframe加载时,你可以调用一个函数来计算iframe的体高:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>

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

那你也可以用

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