Iframe de pantalla completa con una altura del 100%

238

¿La altura del iframe es 100% compatible en 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 de iframe, si digo:

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

Quiero decir, ¿tomará realmente la altura de la página restante (ya que hay otro marco en la parte superior con una altura fija de 50 px) ¿Es 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 oculto completamente las barras de desplazamiento y establezco la altura del iframe automáticamente?

javascript html css iframe html-frames testndtv
fuente
14
Ver realmente no tengo todos los navegadores installed..Also diferente versions..also sólo quería asegurarse de que es una especie de norma ..
testndtv
1
También puedes probarlo en un validador css.
Ruben
66
Sí, eso no da ningún error / advertencia ... Pero mi pregunta es ¿todos los navegadores realmente aplican el 100% de altura?
testndtv
Para mí, esta respuesta funcionó bien: stackoverflow.com/questions/5272519/…
Zied Hamdi

Respuestas:

276

Puede usar el conjunto de marcos 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>

Hack 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, se hace que el padre overflow: hiddenoculte las barras de desplazamiento y se hace que el iFrame vaya hasta un 150% de ancho y alto, lo que obliga a las barras de desplazamiento fuera de la página y dado que el cuerpo no tiene barras de desplazamiento uno no puede esperar que el iframe exceda los límites de la página. ¡Esto oculta las barras de desplazamiento del iFrame con todo su ancho!

Hacha
fuente
3
Suena bien ... Solo una pregunta ... ¿Por qué necesitamos usar style = "height: 100%; width: 100%;" cuando de todos modos estamos diciendo iframe height = "100%" width = "100%"
testndtv
1
Además, sólo el IE no está tomando la altura del 100% (toma alrededor de 200 píxeles ht) ... FF y Safri tomar toda la altura restante ..
testndtv
@ Boris Zbarsky Sí, ¡gracias por hacérmelo saber! ¡He actualizado la publicación ahora! @hmthr ¡Su primera pregunta sobre las etiquetas dobles es porque los navegadores anteriores toman las etiquetas de "alto" y "ancho" pero no funcionan bien con las etiquetas de estilo! Sobre el error de IE, preferiría que te quedes con el primer código para ese caso.
Hacha
15
Para que el iframe use correctamente el 100%, el padre debe ser 100%. En los doctypes más nuevos, html y body tag no son automáticamente 100%. Cuando agregué altura: 100% para html y body, funcionó a la perfección. Entonces, la respuesta correcta para la pregunta, creo, es la respuesta de Rudie, excepto que tenía que mantener mi tipo de documento xhtml. Además, tenga en cuenta que las reglas de desbordamiento no son necesarias. Las barras de desplazamiento funcionan según lo previsto, automáticamente.
Spiralis
3
Esta respuesta SO también es muy corta y agradable.
Uwe Keim
164

3 enfoques para crear una pantalla completa iframe:

  • Enfoque 2: posicionamiento fijo

    Este enfoque es bastante sencillo. Simplemente configure el posicionamiento del fixedelemento y agregue a 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

    Por este último método, acaba de establecer la heightde los body/ html/ iframeelementos a 100%.

    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
fuente
44
Terminé usando una variación de la opción 1 ... Usé ancho: 100% y altura: 100vh porque la fuente que estaba extrayendo era bastante amplia y el iframe está contenido en un div. Excelente solucion. Gracias.
NoJay
2
agregar display: blockhizo el truco para evitar tener una barra de desplazamiento doble
KavenG
45

1. Cambie su DOCTYPE a algo menos estricto. No use XHTML; Es una tontería. Solo usa el doctype HTML 5 y estarás bien:

<!doctype html>

2. Es posible que deba asegurarse (según el navegador) de que el padre del iframe tiene una altura. Y su padre. Y su padre. Etc .:

html, body { height: 100%; }
Rudie
fuente
99
La parte importante aquí para mí fue que la etiqueta html y body necesitaba altura: 100%. Gracias.
Spiralis
1
Establecer solo el cuerpo funciona en Chrome, pero no en otros navegadores.
Dingle
Aquí hay 2 enfoques alternativos .
Josh Crozier el
36

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 significa altura de 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
fuente
3
seamless no es compatible con ningún navegador hasta donde yo sé
VisualBean
1
Después de pasar más tiempo del que me gustaría admitir que estaba inquieto con este problema, esto es EXACTAMENTE lo que necesitaba. Excepto en lugar de un sitio web, utilicé otro archivo HTML, que requirió un pequeño ajuste en la altura de la ventana gráfica y ahora está listo. ¡Gracias!
Thomas Jacobs
29

Esto funcionó muy bien para mí (solo si el contenido del iframe proviene del mismo dominio ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Ivan
fuente
21
Esto solo funcionará si iframe srcestá en el mismo dominio que la página principal; de lo contrario, recibirá un error de permiso denegado contentWindow.document.
wolfyuk
Tomó un poco hacer que esto funcione dentro de Wordpress, acabo de agregar un código corto en mi complemento. FUNCIONA DE MARAVILLA.
Andy
Funciona. pero el problema es que no se volverá a calcular la altura en cada devolución de datos iframe interna. Hay algún trabajo alrededor ?
Behrouz.M
7 

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

khoa
fuente
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

Heitor Giacomini
fuente
4

El siguiente trabajo probado

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Uma Shankar Goel
fuente
1
Ya hay otras 14 respuestas aquí. ¿Puede explicar cómo su respuesta es mejor o al menos diferente de las otras 14?
Stephen Rauch
2

Adicional a la respuesta de Akshit Soota: es importante establecer explícitamente la altura de cada elemento padre, también de la tabla y la columna, si corresponde:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
Brabbeldas
fuente
2

Primero agregas css

html,body{
height:100%;
}

Este será el html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
Tariq Javed
fuente
1

Aquí hay un código conciso. Se basa en un método jquery para encontrar la altura actual de la ventana. Al cargar iFrame, establece que la altura del iframe sea la misma que la ventana actual. Luego, para manejar el cambio de tamaño de la página, la etiqueta del cuerpo tiene un controlador de eventos onresize que establece la altura del iframe cada vez que se cambia el tamaño del documento.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

Aquí hay una muestra de trabajo: http://jsbin.com/soqeq/1/

BraveNewMath
fuente
0

Otra forma de construir pantalla completa fluida iframe:

El video incorporado ocupa toda el viewportárea cuando se carga la página

Enfoque agradable para páginas de destino con video o cualquier contenido incrustado. Puede tener cualquier contenido adicional debajo del video incrustado, que se revela al desplazarse hacia abajo en la página.

Ejemplo:

CSS y código HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Expandir fragmento

DAH
fuente
Tenga en cuenta que es posible que necesite JavaScript para Firefox. Hay un problema común con la altura del iframe en Firefox.
DAH
0

http://embedresponsively.com/

Este es un gran recurso y ha funcionado muy bien las pocas veces que lo he usado. Crea el siguiente código ...

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Tom Witherington
fuente
0

Solo esto funcionó para mí (pero para "mismo dominio"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

puedes usar: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

o 

<iframe .... onload="MakeIframeFullHeight(this);" ....
T.Todua
fuente
0

Según https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , ya no se permiten valores porcentuales. Pero lo siguiente funcionó para mí

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Aunque width:100%funciona, height:100%no funciona. Así window.innerHeightse ha utilizado. También puede usar píxeles CSS para la altura.

El código de trabajo: Enlace sitio de trabajo: Enlace

Agnel Vishal
fuente
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
blueDexter
fuente
0

Puede llamar a una función que calculará la altura del cuerpo del iframe cuando se carga el iframe:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
Tejpal Sharma
fuente