Как мне сделать iframe 100% высоты содержащего div в Firefox? - PullRequest
Новая
       10

Как мне сделать iframe 100% высоты содержащего div в Firefox?

8 голосов
/ 22 марта 2012

У меня возникли проблемы с поиском того, как расширить iframe до 100% его элемента контейнера в Firefox и IE (он отлично работает в 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>

Ответы [ 2 ]

5 голосов
/ 22 марта 2012

Вам может понадобиться комбинация .. 

$(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);
});
3 голосов
/ 22 марта 2012

Попробуйте этот скрипт 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...