Iframe de pantalla completa con una altura del 100%

Resuelto copenndthagen asked hace 13 años • 20 respuestas

¿La altura del iframe = 100% es compatible con todos los navegadores?

Estoy usando doctype como:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En mi código iframe, si digo:

<iframe src="xyz.pdf" width="100%" height="100%" />

Quiero decir, ¿realmente tomará la altura de la página restante (ya que hay otro marco en la parte superior con una altura fija de 50 px)? ¿Es esto compatible con todos los principales navegadores (IE/Firefox/Safari)?

También con respecto a las barras de desplazamiento, aunque digo scrolling="no", puedo ver barras de desplazamiento deshabilitadas en Firefox... ¿Cómo puedo ocultar completamente las barras de desplazamiento y configurar la altura del iframe automáticamente?

copenndthagen avatar May 03 '11 17:05 copenndthagen
Aceptado

Puede usar frameset como indica la respuesta anterior, pero si insiste en usar iFrames, los 2 ejemplos siguientes deberían funcionar:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Una alternativa:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Para ocultar el desplazamiento con 2 alternativas como se muestra arriba:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hackear con el segundo ejemplo:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Para ocultar las barras de desplazamiento del iFrame, el padre debe overflow: hiddenocultar las barras de desplazamiento y el iFrame debe alcanzar un 150% de ancho y alto, lo que fuerza las barras de desplazamiento fuera de la página y dado que el cuerpo no tiene barras de desplazamiento No se puede esperar que el iframe exceda los límites de la página. ¡Esto oculta las barras de desplazamiento del iFrame en todo su ancho!

Axe avatar May 03 '2011 10:05 Axe

3 enfoques para crear una pantalla completa iframe:

  • Método 1: longitudes porcentuales de la ventana gráfica

    En los navegadores compatibles , puede utilizar longitudes de porcentaje de ventana gráfica , como height: 100vh.

    Donde 100vhrepresenta la altura de la ventana gráfica y también 100vwrepresenta el ancho.

    Ejemplo aquí

    body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
    <iframe></iframe>
    Expandir fragmento

  • Método 2: posicionamiento fijo

    Este enfoque es bastante sencillo. Simplemente establezca la posición del fixedelemento y agregue un height/ widthof 100%.

    Ejemplo aquí

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Expandir fragmento

  • Enfoque 3

    Para este último método, simplemente configure heightlos elementos body// en .htmliframe100%

    Ejemplo aquí

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Expandir fragmento

Josh Crozier avatar Jan 09 '2015 04:01 Josh Crozier

Me encontré con el mismo problema, estaba colocando un iframe en un div. Prueba esto:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

La altura se establece en 100vh, que representa la altura de la ventana gráfica. Además, el ancho podría establecerse en 100vw, aunque es probable que tenga problemas si el archivo fuente responde (su marco se volverá muy ancho).

NotJay avatar Jul 30 '2015 14:07 NotJay

1. Cambie su DOCTYPE por algo menos estricto. No utilice XHTML; es una tontería. Simplemente use el tipo de documento HTML 5 y estará bien:

<!doctype html>

2. Es posible que deba asegurarse (depende del navegador) de que el elemento principal del iframe tenga una altura. Y su padre. Y su padre. Etc:

html, body { height: 100%; }
Rudie avatar May 03 '2011 15:05 Rudie