Come posso creare un iframe altezza 100% di un div contenente in Firefox?

Sto avendo qualche problema a capire come estendere un iframe al 100% del suo elemento contenitore in Firefox e IE (funziona perfettamente in Chrome). Dalla ricerca in giro, ha senso che ci deve essere un'altezza specificata sul div contenente (e possibilmente anche corpo e html). Tuttavia, l'ho fatto e l'iframe non si sta ancora estendendo. Tutte le div parent devono avere un'altezza e una posizione specificate per il funzionamento di questo, o solo il genitore che contiene? Qualsiasi correzione per questo sarebbe molto apprezzata!Come posso creare un iframe altezza 100% di un div contenente in Firefox?

Ecco quello che ho:

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

fonte

2012-03-22 David

Siamo spiacenti, per sbaglio ho fatto un riferimento alla larghezza qui nella domanda, ma intendevo davvero altezza. Ho modificato per riflettere questo. – David

Prova questo script 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>

fonte

2012-03-22 05:12:27 sujal

non hai il supporto per il ridimensionamento. –

Potrebbe essere necessario un combinazione di ..

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

fonte

2012-03-22 05:19:05

Come posso creare un iframe altezza 100% di un div contenente in Firefox?

risposta

Problemi correlati