是否所有浏览器都支持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 src="" style=" font - family:宋体;位置:绝对的;边界:没有“> < / 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工作地点: 链接

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

那你也可以用

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

身体{ 保证金:0;/*重置默认margin */ } iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 身高:100 vh;/*视口相对单元*/ 宽度:100大众; } < iframe > < / iframe >

当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,而iframe内没有滚动条,请使用以下css。不需要别的了

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