¿Cómo puedo hacer un iframe 100% alto de un div que contiene en Firefox?

Tengo algunos problemas para descubrir cómo extender un iframe al 100% de su elemento contenedor en Firefox y IE (funciona bien en Chrome). Desde la búsqueda, tiene sentido que haya una altura especificada en el div que contiene (y posiblemente en el cuerpo y también en html). Sin embargo, lo he hecho, y el iframe aún no se extiende. ¿Deben todos los divs parentales tener una altura y una posición especificadas para que esto funcione, o solo el padre que lo contiene? ¡Cualquier solución para esto sería muy apreciada!¿Cómo puedo hacer un iframe 100% alto de un div que contiene en Firefox?

Esto es lo que tengo:

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

Fuente

2012-03-22 David

Lo sentimos, accidentalmente hizo una referencia a la anchura aquí en la pregunta, pero realmente quise decir altura. He editado para reflejar eso. – David

Pruebe este 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>

Fuente

2012-03-22 05:12:27 sujal

no tiene soporte de cambio de tamaño. –

Es posible que tenga una combinación de ..

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

Fuente

2012-03-22 05:19:05

¿Cómo puedo hacer un iframe 100% alto de un div que contiene en Firefox?

Respuesta

Cuestiones relacionadas