是否所有浏览器都支持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工作地点: 链接

其他回答

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

1. 将DOCTYPE更改为不那么严格的内容。不要使用XHTML;这是愚蠢的。只要使用HTML 5文档类型就可以了:

<!doctype html>

2. 您可能需要确保(取决于浏览器)iframe的父对象有一个高度。和它的父结点。和它的父结点。等:

html, body { height: 100%; }

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

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

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