2011-07-15 9 views
6

Estoy jugando con un iframe que incorpora una segunda página y solo muestra un encabezado corto sobre el iframe.¿Por qué la altura del iframe 100% no funciona en una página XHTML?

En una configuración de prueba, height="100%" funcionado correctamente y en otra configuración que no lo hicieron y luego I noticed that la diferencia fue el del un documento donde la altura de marco flotante siempre se establece en aproximadamente 150 píxeles era un documento XHTML, y el documento donde se Works no tiene un conjunto de DOCTYPE.

Por lo tanto, esto funciona: (altura totalmente reducido a la ventana)

<html> 
<head> </head> 
<body> 
<h1>Wrapper Header ...</h1> 
<hr/> 
<iframe src="/jenkins" width="100%" height="100%"> 
    <p>iframes not suppoerted</p> 
</iframe> 
</body> 
</html> 

y esto no hace (altura sobre 150 píxeles o menos)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> </head> 
<body> 
<h1>Wrapper Header ...</h1> 
<hr/> 
<iframe src="/jenkins" width="100%" height="100%"> 
    <p>iframes not suppoerted</p> 
</iframe> 
</body> 
</html> 

de visualización es el mismo en IE8 y FF5.

¿Por qué es que el porcentaje de altura ya no funciona si tengo doctype XHTML?

Respuesta

13

Porque la página se representa en modo estándar con una DTD válida. La razón por la que funcionó en el otro modo es porque estaba en modo peculiar.

La razón por la que funciona en modo peculiar es porque los navegadores fueron muy indulgentes y no estrictos en el pasado, y por lo tanto la gente hizo height="100%" sin especificar alturas en html/body en el pasado.

La forma correcta de hacerlo ahora es establecer alturas en html/body. Pruebe algo como html, body { height:100%; }

El iframe también puede necesitar ser el hijo más cercano para que esto suceda. Alternativamente, probablemente puedas posicionarlo de manera absoluta/fija.

+0

Gracias por mencionar la cosa html/altura del cuerpo. –

+1

Pero, ¿necesita establecer html/altura del cuerpo de la página que contiene el 'iframe' o la página que se carga dentro de ella? –

+0

Altura 100% no funcionó, pero al usar la posición absoluta en el iframe funcionó en mi caso. ¡Gracias! –

Cuestiones relacionadas