web-dev-qa-db-ja.com

Firefoxでiframeを含むdivの100％の高さにするにはどうすればよいですか？

FirefoxとIE（Chromeでは正常に動作します）でiframeをコンテナ要素の100％に拡張する方法を理解するのに問題があります。周りを検索すると、そこにあるのは理にかなっています。含まれているdiv（および場合によってはbodyとhtmlも）で指定された高さである必要があります。しかし、私はそれを実行しましたが、iframeはまだ拡張されていません。すべての親divは、指定された高さと位置を持っている必要がありますか？これが機能するのか、それとも含まれている親だけですか？これに対する修正は大歓迎です！

これが私が持っているものです：

<!DOCTYPE html>
<html>
    <head>
    <style>
         html, body {margin:0; padding:0; height:100%}
         #container {width: 1000px; min-height: 550px; position: relative}
         #smallContainer {position:relative} /*no height specified*/
         #iframeContainer {height: 100%; position: relative}
         #iframe {height: 100%; width: 100%; display: block}

    </style>
    </head>
    <body>
        <div id="container">
            <div id="smallContainer">
                <div id="iframeContainer">
                    <iframe id="iframe" src="foo.com"></iframe>
                </div>
            </div>
        </div>

    </body>
</html>
cssfirefoxiframeheight
8
David

の組み合わせが必要になる場合があります。

$(function(){
    var height = window.innerHeight;
    $('iframe').css('height', height);
});

//And if the outer div has no set specific height set.. 
$(window).resize(function(){
    var height = window.innerHeight;
    $('iframe').css('height', height);
});
5
Robin Maben

このJqueryスクリプトを試してください

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


 <script>

        var height = window.innerHeight;

        $(document).ready( function(){

            $('iframe').css('height', height)

        } );

    </script>
3
sujal