How do I make an iframe 100% height of a containing div in Firefox?

问题

I'm having some trouble figuring out how to extend an iframe to 100% of it's container element in Firefox and IE (it works fine in Chrome). From searching around, it makes sense that there has to be a height specified on the containing div (and possibly body and html as well). However, I have done that, and the iframe is still not extending. Do all of the parent divs have to have a specified height and position for this to work, or just the containing parent? Any fix for this would be greatly appreciated!

Here's what I have:

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

回答1:

You might need a combination of..

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

回答2:

Try this Jquery script

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

来源：https://stackoverflow.com/questions/9816703/how-do-i-make-an-iframe-100-height-of-a-containing-div-in-firefox

标签

css

firefox

iframe

height