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

У меня возникли проблемы с выяснением того, как расширить iframe до 100% его элемента-контейнера в Firefox и IE (он отлично работает в Chrome) . Из поиска становится понятно, что в содержащем div должна быть указана высота (и, возможно, тело и 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>
8
задан Owen Pauling 8 June 2015 в 10:54
поделиться