全屏iframe，高度为100％

238

所有浏览器均支持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高度？

javascript  html  css  iframe  html-frames 
— 测试电视
source
14
居然看到我没有所有的浏览器installed..Also不同versions..also只是想确保它是一种标准的..
— testndtv
1
您也可以在CSS验证程序中尝试。
— 鲁宾
6
是的，这不会产生任何错误/警告...但是我的问题是所有浏览器实际上都适用100％的高度吗？
— testndtv 2011年
对我来说，这个答案的罚款： stackoverflow.com/questions/5272519/...
— Zied哈姆迪

Answers:

276

您可以使用框架集作为先前的答案状态，但是如果您坚持使用iFrame，则以下两个示例应该可以工作：

<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滚动条！

— 斧头
source
3
听起来不错。尽管只是一个问题……为什么我们需要使用style =“ height：100％; width：100％;” 当我们无论如何说iframe height =“ 100％” width =“ 100％”
— testndtv 2011年
1
也只有IE不会占用100％的高度（大约200px ht）... FF和Safri会占用所有剩余的高度
— 。–
@Boris Zbarsky是的，谢谢你让我知道！我现在更新了帖子！！@hmthr与双标签有关的第一个问题是，因为较早的浏览器确实采用了“高度”和“宽度”标签，但不适用于样式标签！关于IE错误，我希望您坚持使用这种情况的第一个代码。
— Ax
15
为了使iframe正确使用100％，父级必须是100％。在较新的doctype中，html和body标签不会自动100％。当我为HTML和body添加height：100％时，它可以完美地工作。因此，我认为该问题的正确答案是rudie的答案，除了我必须保留xhtml doctype。另外，请注意，则不需要溢出规则。然后，滚动条将自动按预期工作。
— Spiralis
3
这样的答案也很简短。
— Uwe Keim 2013年
164

创建全屏的3种方法iframe：

  • 方法1- 视口百分比长度

    在受支持的浏览器中，您可以使用视口百分比长度，例如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>
    展开摘要

  • 方法2-固定定位

    这种方法很简单。只需设置的定位fixed元素，并添加height/ width的100%。

    这里的例子

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

  • 方法3

    对于这最后的方法，只设置height了的body/ html/ iframe元素100%。

    这里的例子

    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>
    展开摘要

— 乔什·克罗泽（Josh Crozier）
source
4
我最终使用了选项1的变体...我使用了width：100％和height：100vh，因为我提取的源非常宽，而iframe包含在div中。优秀的解决方案。谢谢。
— NotJay 2015年
2
增加display: block了防止双滚动条的诀窍
— KavenG
45

1.将您的DOCTYPE更改为不太严格的名称。不要使用XHTML；真傻 只需使用HTML 5文档类型，您就可以做到：

<!doctype html>

2.您可能需要确保（取决于浏览器）iframe的父级的高度。和它的父母。和它的父母。等等：

html, body { height: 100%; }
— 鲁迪
source
9
对我来说，重要的部分是html和body标签需要height：100％。谢谢。
— Spiralis
1
在Chrome浏览器中只能设置正文，而在其他浏览器中则不能。
— Dingle 2014年
— Josh Crozier 2015年
36

我遇到了同样的问题，当时我正在将iframe拉入div。试试这个：

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

高度设置为100vh，代表视口高度。此外，宽度可以设置为100vw，尽管如果源文件响应时您可能会遇到问题（您的帧会变得很宽）。

— 不是杰伊
source
3
据我所知，任何浏览器均不支持
— Seamless
1
在花了我不想让这个问题烦躁不安的时间之后，这正是我所需要的。除了使用网站以外，我使用了另一个HTML文件，该文件需要对视口高度进行较小的调整，现在一切正常。谢谢！
— Thomas Jacobs
29

这对我来说非常有效（仅当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>
— 伊万
source
21
仅iframe src当与父页面位于同一域上时，此方法才有效，否则您将在上看到一个权限被拒绝的错误contentWindow.document。
— wolfyuk 2012年
花了一点时间在Wordpress中完成此工作，我只是在插件中添加了一个简码。奇迹般有效。
— 安迪
有用。但是问题在于它不会重新计算每次内部iframe回发的高度。有什么解决方法吗？
— Behrouz.M 2015年
7 

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>
展开摘要

— 霍阿
source
4

以下经过测试的工作

<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>
— 乌玛·香卡·高尔（Uma Shankar Goel）
source
1
这里已经有14个其他答案。您能否解释一下您的答案与其他14个答案相比是更好还是至少不同？
— 史蒂芬·劳奇
2

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>
— 布拉贝达斯
source
2

您首先添加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>
— 塔里克·贾维德（Tariq Javed）
source
1

这是一个简洁的代码。它确实依赖于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/

— 勇敢的新数学
source
0

建立流畅全屏的另一种方法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>
展开摘要

— DAH
source
请注意，您可能需要Firefox的一些JavaScript。在Firefox上，iframe高度存在一个常见问题。
— DAH，2015年
0

http://embedsensitively.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>
— 汤姆·威瑟灵顿
source
0

只有这对我有用（但对于“相同域”）：

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);" ....
— 托杜亚
source
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
source
0

您可以调用一个函数，该函数将在加载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=...>
— 特佩尔·沙玛（Tejpal Sharma）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.