高度为100%的全屏iframe

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

1052211 次浏览
小开
最佳答案

你可以使用frameset作为前面的答案，但如果你坚持使用iFrames，以下两个例子应该工作:

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

另一个:

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

隐藏滚动2个替代方案如上所示:

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

用第二个例子来破解:

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

为了隐藏iFrame的滚动条，父对象被overflow: hidden来隐藏滚动条，iFrame被设置为150%的宽和高，这迫使滚动条在页面之外，由于主体没有滚动条，人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!

小开

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

<!doctype html>

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

html, body { height: 100%; }
小开

这对我来说非常有用(除非iframe内容来自同一域):

<script type="text/javascript">
function calcHeight(iframeElement){
var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
小开

补充Akshit Soota的回答: 显式设置每个父元素的高度是重要的，表的高度也是如此，如果有的话列也是如此 

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">




<table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
小开

这是一个简洁的代码。它依赖于jquery方法来查找当前窗口高度。在iFrame加载时，它设置iFrame的高度与当前窗口相同。然后为了处理页面大小的调整，body标记有一个onresize事件处理程序，它在文档调整大小时设置iframe的高度。

<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

下面是一个工作示例:http://jsbin.com/soqeq/1/

小开

创建全屏iframe的3种方法:

  • 方法1 - Viewport-percentage长度

    在支持的浏览器中，你可以使用viewport-percentage长度，例如height: 100vh。

    其中100vh表示视口的高度，同样100vw表示宽度。

    示例 .

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

  • Approach 2 - Fixed positioning

    This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

    Example Here

    iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}
    <iframe></iframe>

  • Approach 3

    For this last method, just set the height of the body/html/iframe elements to 100%.

    Example Here

    html, body {
height: 100%;
margin: 0;         /* Reset default margin on the body element */
}
iframe {
display: block;       /* iframes are inline by default */
background: #000;
border: none;         /* Reset default border */
width: 100%;
height: 100%;
}
    <iframe></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:

当页面加载时，嵌入式视频填充整个viewport区域

很好的方法登陆页面与视频或任何嵌入式内容。您可以有任何额外的内容下面嵌入视频，这是显示时，滚动页面向下。

例子:

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>

小开

首先添加css

html,body{
height:100%;
}

这将是html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
小开

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>
小开 

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>

小开

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

小开

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

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"));

或

<iframe .... onload="MakeIframeFullHeight(this);" ....
小开

根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe，不再允许百分比值。 但是下面的对我有用

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

虽然width:100%可以工作，但height:100%不能工作。所以window.innerHeight已经被使用。你也可以用css像素来表示高度。

工作代码:链接工作地点: 链接 < / p >

小开

以下测试工作

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
小开 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">


</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;
}
小开

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

那你也可以用

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

尝试使用jquery，

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

提交答案