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


当前回答

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

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

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

其他回答

我遇到了同样的问题,我拉一个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的体高:

<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=...>

另一种构建流体全屏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 src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

创建全屏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 >