如何在Firefox中創建一個包含div的100％高度的iframe？

我有一些麻煩，搞清楚如何擴展一個iframe到它的容器元素在Firefox和IE的100％（它在Chrome中工作正常）。從四處搜索，有意義的是，必須在包含div上指定高度（以及可能的body和html）。不過，我已經這樣做了，iframe仍然沒有擴展。是否所有的父div都必須具有指定的高度和位置才能工作，或者只是包含父級的父級？任何修復這個將不勝感激！如何在Firefox中創建一個包含div的100％高度的iframe？

這是我有：

<!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 2012-03-22 15:17:10

試試這個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

您沒有調整大小支持。 – 2013-03-28 07:42:02

您可能需要的組合..

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

如何在Firefox中創建一個包含div的100％高度的iframe？

回答

相關問題