Estiramiento de iframe en HTML5

Tengo dos archivos html, uno contiene el otro con un iframe, y quiero hacer que este iframe se extienda sobre la altura máxima del html padre.Estiramiento de iframe en HTML5

Así que el primer archivo html (que tiene un fondo rojo) se ven como:

<!DOCTYPE html> 
<html> 
<body style="background-color: red; margin: 0px; padding: 0px;"> 
    <iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" /> 
</body> 
</html>

El segundo (que tiene un fondo azul):

<!DOCTYPE html> 
<html>  
<body style="background-color: blue;" /> 
</html>

Si todo es correcto espero para ver solo un fondo azul, porque el iframe debe superponerse a toda la página primaria, pero solo veo una tira de azul y una gran cantidad de rojo ..

Con el doctype HTML5 <!DOCTYPE html> Me parece que no puede ser conseguir el resultado correcto:

With HTML5 DOCTYPE

Si quito el tipo de documento HTML5 consigo el resultado que quiero. Creo que esto se debe a que hará que el HTML en modo de peculiaridades:

Without HTML5 DOCTYPE

sí quiero el tipo de documento HTML, sin embargo, así que ¿cómo puedo solucionar este problema? ¡Gracias por mirar!

Fuente

2011-08-10 Arcturus

que estoy haciendo eso con mi [W3 Viewer] (http://w3viewer.com) El truco es poner el IFRAME en un DIV. A continuación, coloque el DIV de forma que cubra toda la página y establezca 'width: 100%; altura: 100%; 'en el IFRAME. –

CSS:

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; } 
#iframe { display: block; width:100%; height:100%; }

HTML:

<div id="wrap"> 
    <iframe src="..." frameborder="0" id="iframe"></iframe> 
</div>

Demostración en directo:http://jsfiddle.net/5G5rE/show/

Fuente

2011-08-10 13:39:44

¿Podría explicar por qué ocurre este problema y cómo la posición: solucionado soluciona el problema? ¡Gracias! – Jay

@Jay OP estableció la altura del IFRAME al 100%. Este porcentaje se refiere al bloque contenedor, en este caso el elemento BODY. Sin embargo, la altura del elemento BODY, de forma predeterminada, depende de la altura de su contenido. Esta es una dependencia circular: la altura de BODY depende de la altura del IFRAME y viceversa. Esto no funcionará, obviamente. Se podría establecer la altura de los elementos BODY y HTML al 100%, eso funcionaría. Prefiero el posicionamiento fijo, es más flexible (uno puede definir la posición y las dimensiones con precisión). –

¡Gracias Šime Vidas por la explicación! – Jay

Respuesta

Cuestiones relacionadas