如何将 iframe 高度和宽度设置为 100%答案

【问题标题】：How to set the iframe height & width to 100%如何将 iframe 高度和宽度设置为 100%
【发布时间】：2014-05-26 11:07:35
【问题描述】：

我需要做以下事情：

我有一个 70 像素的标题内容和一个带有包装器的 iframe。 iframe 的高度和宽度必须设置为 100% 卷轴，除了为身体而来的卷轴，当内容已加载，内容的大小更大。
iframe 的内容是来自同一域的另一个 HTML 页面。 iframe 还需要根据响应式 HTML 进行缩放页面。

谁能帮忙？

我不能使用的东西：

位置：固定；（主要是由于我用于侧滑栏的脚本

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bus Management System</title>
    <!-- Viewport meta tag to prevent iPhone from scaling our page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>


  </head>

    <style type="text/css" media="all">
        html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
        body {border:4px solid green;}
        iframe {border:6px solid red;width:100%; height:100%;display:block;}
        #wrapper {border:2px solid blue; width:100%; height:100%;}

    </style>
    <body>
        <div style="height:50px; background-color:#000; color:#fff;">Header</div>

            <iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>

    </body>
</html>

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

100% 宽度和高度以及响应式的 CSS 唯一解决方案

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

没有位置：绝对

css

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

终于来了破解

现代浏览器现在支持：

width: calc(100% - 70px);

CSS

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

<div class="container">
    <div class="element">here it goes</div>
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Final DEMO

【讨论】：

谢谢高拉夫。但是我在正文部分有一个带有响应式下拉菜单的标题。当菜单下拉整个内容时，包括 iframe 在内的所有内容都会调整其位置，因此不确定我是否可以使用 Position:absolute;
查看编辑，现在没有位置：absolute
如果在正文中有另一个标题元素（div=70px）和 iframe，你会如何处理这个问题？希望你得到我的问题？
我不太确定你的问题。是这个jsfiddle.net/4dgaurav/3LAat/2
如果您考虑您的示例，标题的高度为 70 像素。即使我将所有 iFrame 父级指定为 100% 的高度。滚动是通过添加标题（.element）的 70px 高度来实现的。在调整大小时，我需要没有那些滚动条的 iframe 的流动宽度和高度。现在得到了吗？

【解决方案2】：

这对我有用

&lt;iframe frameborder="0" height="490" scrolling="no" src="" width="735"&gt;&lt;/iframe&gt;

【讨论】：

您能否在答案中添加更多详细信息/上下文。请解释为什么这对你有用。您的解决方案适用于所有屏幕宽度吗？
width="100%" 也可以。例如：<iframe frameborder="0" height="490" scrolling="no" src="" width="100%"></iframe>

【解决方案3】：

大众单位工作（在 Chrome 和 Firefox 上测试）

iframe{
 width:100vw;
}

【讨论】：

【解决方案4】：

通常您为 iframe 设置宽度和高度。如果里面的内容比较大，滚动条就足够了。下面的脚本试图通过动态调整 iframe 的大小以适应它加载的内容来解决这个问题。

您可以使用此功能使用 jquery /javascript 设置自动高度

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>

你的 iframe html 像这样

<iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>

【讨论】：

嗨：我仍然得到双滚动 - 我需要在这里做两件事 1. 我需要从主 HTML 中删除滚动，这是由于正文中的 header=70px 而发生的 2。 iframe 还需要根据内容 HTML 进行缩放。对不起，我也是一只新蜜蜂。
脚本还会抛出 Uncaught ReferenceError: $ is not defined 错误
你需要添加jquery库..使用`
您的 Ifrme 是同一个域还是不同域？

【解决方案5】：

简单干净。 jQuery 是必需的。来源：https://stackoverflow.com/a/3940802

稍作修改

                function iframeHeight() {
                    var newHeight = $(window).height();
                    var newWidth = $(window).width();
                    var buffer = 100;     // space required for any other elements on the page
                    var newIframeHeight = newHeight - buffer;

                    $('iframe.fop').css('height',newIframeHeight).css('width',newWidth);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
                }

                // When DOM ready
                $(function() {
                    window.onresize = iframeHeight;
                    iframeHeight();
                });

&lt;iframe src="" target="_parent" width="100%" height="100%" class="fop"&gt;&lt;/iframe&gt;

【讨论】：

【解决方案6】：

你可以尝试做这样的事情：

  iframe {
    width: 825px;   // you define your standar width and height
    height: 464px;
    @media screen and (max-width: 1000px){ // then for your responsive you do this or only this. 
      width: calc(84vw);
      height: calc(47vw)
    }  
  }

【讨论】：

【解决方案7】：

我有一个比例为 6:19 的视频帧来自 YouTube -> 通过计算 9/16 - 0.5625。乘以 95vw（也可以设置为 100vW）。

尽最大努力保持视频比例不变。

@media all and (max-width: 730px) {
    iframe{
        width: 95vw !important;
        height: calc(95vw*0.56) !important;
    }
}
    iframe{
    margin:auto;
    display:block;
    width:685px;
    height:385px;
}

    &lt;iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"&gt;&lt;/iframe&gt;

【讨论】：