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

У меня возникли проблемы с выяснением того, как расширить iframe до 100% его контейнерного элемента в Firefox и IE (он отлично работает в Chrome). Из поиска вокруг, имеет смысл, что должна быть высота, указанная в содержащем div (и, возможно, в теле и html). Однако я сделал это, и iframe все еще не распространяется. Должны ли все родительские divs иметь заданную высоту и позицию для работы, или только содержащий родитель? Любое исправление для этого было бы высоко оценено!Как создать iframe 100% высоту содержащего div в Firefox?

Вот что у меня есть:

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

источник

2012-03-22 David

К сожалению, я случайно сделал ссылку на ширину здесь, в вопросе, но я действительно имел в виду высоту. Я отредактировал это, чтобы отразить это. – David

Попробуйте этот скрипт 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>

источник

2012-03-22 05:12:27 sujal

у вас нет поддержки размера. –

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

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

источник

2012-03-22 05:19:05

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

ответ

Смежные вопросы