TRUCO: Cómo hacer un IFRAME que ocupe el 100% de la altura

Hoy he estado perdiendo un buen rato con esta tontería. Y es que parece mentira, pero si metes un <iframe> en tu página y le estableces sus propiedades width y height al 100% para que ocupen toda la página sólo te hace caso el ancho. El alto no funciona, da igual que lo pongas en sus atributos o en sus estilos CSS. No hace ni caso :-(

Tras romperme la cabeza unr ato he estado buscando en Internet y hay soluciones para todos los gustos, la mayoría de las cuales no funcionan. Además si funcionan en Internet Explorer no funcionan en Firefox o al revés. Es un verdadero peñazo.

Al final la solución pasa por establecer una serie de atributos para algunos tags de la página, así:

<style type="text/css">
    html, body, div, iframe { margin:0; padding:0; height:100%; }
    iframe { display:block; width:100%; border:none; }
</style>

Si no haces esto no hay forma de que pille el alto completo de la página. Así que ya lo sabes.

Espero que esto te sirve para que no pierdas tiempo como me pasó a mi :-)

Archivado en:
Comparte este post:

Comentarios

# Arturo said:

Muchas gracias por tu snippets. Muy util.

saludos o¡

Saturday, August 08, 2009 2:59 AM
# paulo vila said:

Esto también se aplica a las aplicaciones Silverlight, para no mostrar el scrollbar vertical

Sunday, August 09, 2009 4:59 PM
# José M. Alarcón Aguín said:

Hola Álvaro:

Si el contenido creciera saldría una barra vertical, que es lo que debería pasar. Mi intención con esto no es que no aparezcan scrolls, es que el iframe ocupe todo el área visible, como si realmente no existiera tal iframe.

Saludos

JM

Sunday, August 16, 2009 11:07 AM
# vartan said:

Hola como estas ?, primero que nada agradecerte por el tiempo que le dedicas a entregarnos una solucion a nuestros problemas, instale el codigo y mefunciona perfecto en firefox pero en explorer no hay caso, me habre 2 barra de navegacion al lado derecho, e intentado todo y me gano, me podrias ayudar por favor ?.

Muchas gracias.

Saturday, September 12, 2009 7:56 AM
# José M. Alarcón Aguín said:

Hola vartan:

Pues no sé qué decirte, algo debes de tener que te trastoca esto, porque a mi me funciona perfectamente en los dos navegadores... :-(

JM

Saturday, September 12, 2009 11:59 AM
# Vartan said:

Si, debe haber algo extraño en los codigos, bueno .. muchas gracias igual, termino ganandonos a los 2 jaja.

Saludos y gracias.

Saturday, September 12, 2009 7:29 PM
# juver said:

Tenia el mismo problema, le quite esto, y me funciono! evitar mejor el usarlo si realmente no es necesario.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"www.w3.org/.../xhtml1-strict.dtd">

<html xmlns="www.w3.org/.../xhtml" lang="en" xml:lang="en">

Sunday, December 20, 2009 3:05 PM
# Alberto said:

Has encontrado como fixearlo para Chrome, Opera ? en esos no funciona :(

Saturday, August 28, 2010 7:49 AM
# pp said:

se ve muy buena la solucion .... pero "¿tag?" podrias ser mas claro gracias

Monday, February 28, 2011 1:30 AM