html - que - ¿Cómo le das iframe 100% de altura

iframe responsive bootstrap

Question

Esta pregunta ya tiene una respuesta aquí:

• Iframe de pantalla completa con una altura de 100% 14 respuestas

Lo estoy intentando

<iframe height="100%" ...>

pero aún no lo cambia de tamaño. Cuando intento la altura en píxeles, funciona.

editar: 100% parece estar funcionando en IE pero no en Firefox

Answer 1

El atributo iFrame no admite porcentaje en HTML5. Solo admite píxeles. http://www.w3schools.com/tags/att_iframe_height.asp

Answer 2

El problema con los iframes que no alcanzan el 100% de altura no es porque sean difíciles de manejar. El problema es que para que alcancen el 100% de altura , necesitan que sus padres tengan el 100% de altura . Si uno de los padres del iframe no es 100% alto, el iframe no podrá ir más allá de la altura de ese padre.

Entonces, la mejor solución posible sería:

html, body, iframe { height: 100%; }

... dado que el iframe está directamente debajo del cuerpo . Si el iframe tiene un elemento primario entre él y el cuerpo, el iframe seguirá teniendo la altura de su elemento primario. Uno debe establecer explícitamente la altura de cada padre al 100% también (si eso es lo que uno quiere).

Probado en:

Chrome 30 , Firefox 24 , Safari 6.0.5 , Opera 16 , IE 7, 8, 9 and 10

PD: No me refiero a ser quisquilloso, pero la solución marcada como correcta no funciona en Firefox 24 en el momento de escribir esto, pero funcionó en Chrome 30 . Aunque no he probado en otros navegadores. Encontré el error en Firefox porque la página que estaba probando tenía muy poco contenido ... Podría ser que sea mi margen de beneficio mínimo o el restablecimiento de CSS altera la salida, pero si experimenté este error supongo que la respuesta aceptada no funciona en cada situación

Answer 3

Puedes hacerlo con CSS:

<iframe style="position: absolute; height: 100%; border: none"></iframe>

Tenga en cuenta que esto lo colocará de forma predeterminada en la esquina superior izquierda de la página, pero supongo que eso es lo que desea lograr. Puede colocar con las propiedades de CSS left , right , top e bottom .