web-dev-qa-db-ja.com

iframeの高さと幅を100％に設定する方法

私は次のことをする必要があります：

  1. ヘッダーコンテンツが70pxで、iframeにラッパーがあります。 iframeの高さと幅は、スクロールなしで100％に設定する必要があります。ただし、コンテンツがロードされ、コンテンツのサイズが大きくなるとボディに来るスクロールを除きます。
  2. 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>
javascriptjqueryhtmlcssiframe
13
deepak

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%;
}

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

最終デモ

10
4dgaurav

シンプルできれい。 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();
                });
<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>
0
Yash

vwユニットは動作します（ChromeおよびFirefoxでテスト済み）

iframe{
 width:100vw;
}
0
Bob

これは私のために働いた

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>
0
Milan Techglyphs

通常、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>
0
Anant Dabhi