高度为 100% 的全屏 iframe

【问题标题】：Full-screen iframe with a height of 100%高度为 100% 的全屏 iframe
【发布时间】：2011-08-17 14:25:31
【问题描述】：

所有浏览器都支持 iframe height=100% 吗？

我使用的文档类型为：

<!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 高度？

【问题讨论】：

  • 实际上我没有安装所有的浏览器..还有不同的版本..也只是想确保它是一种标准..
  • 你也可以在 CSS 验证器中尝试。
  • 是的，这不会给出任何错误/警告......但我的问题是所有浏览器实际上都应用 100% 高度吗？
  • 对我来说这个答案很好用：stackoverflow.com/questions/5272519/…

标签： javascript html css iframe html-frames


【解决方案1】：

您可以按照前面的回答状态使用框架集，但如果您坚持使用 iFrame，以下 2 个示例应该可以工作：

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

【讨论】：

  • 听起来不错……不过只有一个问题……为什么我们需要使用 style="height:100%;width:100%;"当我们无论如何都说 iframe height="100%" width="100%"
  • 也只有 IE 没有占据 100% 的高度（大约需要 200px ht）...FF 和 Safri 占据了所有剩余的高度..
  • @Boris Zbarsky 是的，谢谢你让我知道！我现在更新了帖子！！ @hmthr您与双标签有关的第一个问题是因为早期的浏览器确实采用了“高度”和“宽度”标签，但不能很好地使用样式标签！关于 IE 错误，我希望您坚持使用该案例的第一个代码。
  • 要让 iframe 正确使用 100%，父级需要为 100%。在较新的文档类型中，html 和 body 标记不会自动 100%。当我为 html 和 body 添加 height:100% 时，它可以完美地工作。所以，我认为这个问题的正确答案是 rudie 的答案，除了我必须保留我的 xhtml doctype。另外，请注意溢出规则不是必需的。然后滚动条按预期工作 - 自动。
  • 仅供参考“HTML 标记。HTML5 不支持。” - 参考。 w3schools.com/tags/tag_frameset.asp.
【解决方案2】：

1。将您的 DOCTYPE 更改为不那么严格的东西。不要使用 XHTML；这很愚蠢。只需使用 HTML 5 doctype 就可以了：

<!doctype html>

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

html, body { height: 100%; }

【讨论】：

  • 对我来说重要的部分是 html 和 body 标签需要 height:100%。谢谢。
  • 仅设置正文在 Chrome 中有效，但在其他浏览器中无效。
  • Here are 2 alternative approaches.
【解决方案3】：

这对我来说非常有效（仅当 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>

【讨论】：

  • 这仅在iframe src 与父页面位于同一域时才有效，否则您将在contentWindow.document 上收到权限被拒绝错误。
  • 花了一点时间在 Wordpress 中完成这项工作，我刚刚在我的插件中添加了一个短代码。像魅力一样工作。
  • 它有效。但问题是它不会重新计算每个内部 iframe 回发的高度。有什么解决办法吗？
【解决方案4】：

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

【讨论】：

    【解决方案5】：

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

    【讨论】：

      【解决方案6】：

      创建全屏的3种方法iframe：

      • 方法 1 - Viewport-percentage lengths

        在supported browsers中，可以使用viewport-percentage lengths，如height: 100vh。

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

        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;
}
        &lt;iframe&gt;&lt;/iframe&gt;

      • 方法 2 - 固定定位

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

        Example Here

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

      • 方法 3

        对于最后一种方法，只需将body/html/iframe 元素的height 设置为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%;
}
        &lt;iframe&gt;&lt;/iframe&gt;

      【讨论】：

      • 我最终使用了选项 1 的变体...我使用了 width:100% 和 height:100vh，因为我拉的源非常宽，并且 iframe 包含在一个 div 中。优秀的解决方案。谢谢。
      • 添加 display: block 可以防止出现双滚动条
      • 另一种方法可以在这里找到（使用 padding-top: 100%; /* 1:1 Aspect Ratio */): w3schools.com/howto/howto_css_responsive_iframes.asp
      【解决方案7】：

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

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

      高度设置为 100vh，代表视口高度。此外，宽度可以设置为 100vw，但如果源文件是响应式的，您可能会遇到问题（您的框架会变得非常宽）。

      【讨论】：

      • 据我所知，任何浏览器都不支持无缝
      • 在花费了比我愿意承认在这个问题上坐立不安的时间之后，这正是我所需要的。除了我使用另一个 HTML 文件而不是网站之外，这需要对视口高度进行细微调整，现在可以开始了。谢谢！
      • 我使用这个解决方案得到了一个双滚动条，但它工作正常
      【解决方案8】：

      另一种构建流畅全屏的方法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>

      【讨论】：

      • 请注意，您可能需要一些用于 Firefox 的 javascript。 Firefox 上的 iframe 高度存在常见问题。
      【解决方案9】：

      你先添加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>

      【讨论】：

        【解决方案10】：

        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>

        【讨论】：

          【解决方案11】： 

          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;
}
          &lt;iframe&gt;&lt;/iframe&gt;

          【讨论】：

            【解决方案12】：

            &lt;iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"&gt;&lt;/iframe&gt;

            【讨论】：

              【解决方案13】：

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

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

              【讨论】：

                【解决方案14】：

                根据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 像素作为高度。

                工作代码：Link工作地点： Link

                【讨论】：

                  【解决方案15】：

                  以下测试工作

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

                  【讨论】：

                  • 这里已经有 14 个其他答案。你能解释一下你的答案比其他 14 人更好或至少不同吗？
                  • 我尝试了这个并且出现了一些非常有趣的结果。父框架和 iFrame 合并在一起了！
                  【解决方案16】： 
                  <iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

                  【讨论】：

                    【解决方案17】：

                    您可以调用一个函数来计算 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=...>

                    【讨论】：

                      【解决方案18】：

                      要在 iframe 中获得没有滚动条的全屏 iframe，请使用以下 css。什么都不需要了

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

                      【讨论】：

                        猜你喜欢
                        • 1970-01-01
                        • 2017-05-17
                        • 2016-08-09
                        • 2016-11-20
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        相关资源
                        最近更新 更多
                        热门标签
                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode