Question

我在弄清楚如何将iframe扩展到Firefox和IE中100％的容器元素时遇到了一些麻烦（它在Chrome中运行良好）。从搜索周围，有必要在包含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>

Answer 1

您可能需要组合..

$(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);
});

Answer 2

试试这个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>

如何在Firefox中制作包含div的iframe 100％高度？

2 个答案: