Haga que Iframe se ajuste al 100% de la altura restante del contenedor

260

Quiero diseñar una página web con un banner y un iframe. Espero que el iframe pueda llenar toda la altura de página restante y cambiar su tamaño automáticamente a medida que el navegador cambia de tamaño. ¿Es posible hacerlo sin escribir código Javascript, solo con CSS?

Intenté establecer height:100%en iframe, el resultado es bastante cercano, pero el iframe intentó llenar toda la altura de la página, incluida la 30pxaltura del elemento div de banner, por lo que obtuve una barra de desplazamiento vertical innecesaria. No es perfecto

Notas de actualización : Disculpe por no describir bien la pregunta, probé el margen CSS, el atributo de relleno en DIV para ocupar toda la altura de recordatorio de una página web con éxito, pero el truco no funcionó en el iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
Expandir fragmento

Cualquier idea es apreciada.

html css iframe Hilo oscuro
fuente

Respuestas:

236

Actualización en 2019

TL; DR: Hoy la mejor opción es la última en esta respuesta: flexbox. Todo lo soporta muy bien y lo ha sido durante años. Ve por eso y no mires atrás. El resto de esta respuesta se deja por razones históricas.

El truco es entender de qué se toma el 100%. Leer las especificaciones CSS puede ayudarte allí.

Para abreviar una larga historia, existe el "bloque de contención", que no es necesariamente el elemento padre. Simplemente dicho, es el primer elemento en la jerarquía que tiene posición: relativa o posición: absoluta. O el elemento del cuerpo en sí mismo si no hay nada más. Entonces, cuando dices "ancho: 100%", verifica el ancho del "bloque que contiene" y establece el ancho de tu elemento al mismo tamaño. Si había algo más allí, entonces podría obtener el contenido de un "bloque que contiene" que es más grande que sí mismo (por lo tanto, "desborda").

La altura funciona de la misma manera. Con una excepcion. No puede obtener la altura al 100% de la ventana del navegador. El elemento de nivel más alto, contra el cual se puede calcular el 100%, es el elemento body (o html? No estoy seguro), y se estira lo suficiente como para contener su contenido. Especificar altura: el 100% no tendrá efecto, ya que no tiene un "elemento padre" contra el cual medir el 100%. La ventana en sí misma no cuenta. ;)

Para hacer que algo se extienda exactamente al 100% de la ventana, tiene dos opciones:

  1. Usar JavaScript
  2. No uses DOCTYPE. Esta no es una buena práctica, pero pone los navegadores en "modo peculiar", en el que puede hacer height = "100%" en los elementos y los estirará al tamaño de la ventana. Tenga en cuenta que el resto de su página probablemente también tendrá que cambiarse para acomodar los cambios de DOCTYPE.

Actualización: no estoy seguro de si no estaba equivocado cuando publiqué esto, pero esto ciertamente está desactualizado ahora. Hoy puede hacer esto en su hoja de estilo: html, body { height: 100% }y en realidad se extenderá a toda su ventana gráfica. Incluso con un DOCTYPE. min-height: 100%También podría ser útil, dependiendo de su situación.

Y tampoco recomendaría a nadie que haga un documento en modo peculiar ya que causa muchos más dolores de cabeza que los resuelve. Cada navegador tiene un modo de peculiaridades diferente, por lo que hacer que su página se vea de manera consistente en los navegadores se vuelve dos órdenes de magnitud más difícil. Use un DOCTYPE. Siempre. Preferiblemente el HTML5 - <!DOCTYPE html>. Es fácil de recordar y funciona de maravilla en todos los navegadores, incluso los de 10 años.

La única excepción es cuando tienes que soportar algo como IE5 o algo así. Si estás allí, entonces estás solo de todos modos. Esos navegadores antiguos no se parecen en nada a los navegadores de hoy, y los pequeños consejos que se dan aquí lo ayudarán con ellos. En el lado positivo, si estás allí, probablemente solo tengas que admitir UN tipo de navegador, que elimina los problemas de compatibilidad.

¡Buena suerte!

Actualización 2: ¡Hola, ha pasado mucho tiempo! 6 años después, nuevas opciones están en escena. Acabo de tener una discusión en los comentarios a continuación, aquí hay más trucos para usted que funcionan en los navegadores de hoy.

Opción 1 : posicionamiento absoluto. Agradable y limpio para cuando conoces la altura precisa de la primera parte.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>
Expandir fragmento

Algunas notas - la second-rowque se necesita contenedor debido bottom: 0y right: 0no funciona en iframes, por alguna razón. Algo que ver con ser un elemento "reemplazado". Pero width: 100%y height: 100%funciona bien. display: blockes necesario porque es un inlineelemento por defecto y los espacios en blanco comienzan a crear desbordamientos extraños de lo contrario.

Opción 2 - tablas. Funciona cuando no sabes la altura de la primera parte. Puede usar <table>etiquetas reales o hacerlo de la manera más elegante display: table. Iré por lo último porque parece estar de moda en estos días.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>
Expandir fragmento

Algunas notas: overflow: autose asegura de que la fila siempre incluya todo su contenido. De lo contrario, los elementos flotantes a veces pueden desbordarse. El height: 100%en la segunda fila se asegura de que se expanda tanto como pueda apretando la primera fila lo más pequeño posible.

Opción 3 - flexbox. El más limpio de todos, pero con un soporte de navegador menos que estelar. IE10 necesitará -ms-prefijos para las propiedades de flexbox, y cualquier cosa menos no lo admitirá en absoluto.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Expandir fragmento

Algunas notas: la overflow: hiddencausa es que el iframe todavía genera algún tipo de desbordamiento incluso display: blocken este caso. No es visible en la vista de pantalla completa o en el editor de fragmentos, pero la pequeña ventana de vista previa obtiene una barra de desplazamiento adicional. No tengo idea de qué es eso, los iframes son raros.

Vilx-
fuente
@sproketboy Bueno, es una recomendación del W3C. Y ni siquiera es lo peor, ni mucho menos.
John
Entonces, ¿ponemos esto en la hoja de estilo de la página del IFrame o en la hoja de estilo de la página principal que contiene el IFrame?
Mathias Lykkegaard Lorenzen
1
Eso es genial, gracias! El flexbox es el más limpio, pero las tablas también son excelentes para aprender y parecen funcionar sin los desbordamientos: jsfiddle.net/dmitri14/1uqh3zgx/2
Dmitri Zaitsev
1
Puede valer la pena mover las últimas actualizaciones a la parte superior de esta respuesta. Tuve que pasar por todo para llegar a la mejor respuesta, flexbox.
forgivenson
2
@forgivenson: lo suficientemente cierto. Se agregó una nota al comienzo de esta respuesta.
Vilx-
68

Usamos un JavaScript para resolver este problema; Aquí está la fuente.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Nota: ifmes la ID del iframe

pageY() fue creado por John Resig (el autor de jQuery)

MichAdel
fuente
50

Otra forma de hacerlo sería utilizar el position: fixed;nodo primario.
Si no me equivoco, position: fixed;vincula el elemento a la ventana gráfica, por lo tanto, una vez que le dé este nodo width: 100%;y sus height: 100%;propiedades, se extenderá por toda la pantalla. A partir de este momento, puede poner una <iframe>etiqueta dentro de él y extenderlo sobre el espacio restante (tanto en ancho como en alto) con una simple width: 100%; height: 100%;instrucción CSS.

Código de ejemplo

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
Expandir fragmento

D1SoveR
fuente
1
¿Cómo es esto tomando la altura "restante" ...?
EricG
3
He notado que también necesita agregar position: fixedal iframe.
0xF
gracias, arreglé mi informe SSRS a la altura, el suicidio evitado por otro día.
Mike D
1
no hay barras de desplazamiento visibles
andrej
perfecto - ¿podría explicar el css '>' por ejemplo div # root> iframe furtheras estoy familiarizado con él y no puedo encontrar la referencia
Datadimension
40

Aquí hay algunos enfoques modernos:

  • Enfoque 1 - Combinación de unidades relativas de ventana gráfica / calc().

    La expresión calc(100vh - 30px)representa la altura restante. Dónde 100vhestá la altura del navegador y el uso de calc()desplaza efectivamente la altura del otro elemento.

    Ejemplo aquí

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>
    Expandir fragmento

    Apoyo por calc()aquí ; soporte para unidades relativas de ventana aquí .

  • Enfoque 2: enfoque de Flexbox

    Ejemplo aquí

    Establezca el displaydel elemento principal común en flex, junto con flex-direction: column(suponiendo que desea que los elementos se apilen uno encima del otro). Luego configure flex-grow: 1el iframeelemento hijo para que ocupe el espacio restante.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    Expandir fragmento

    Dado que este enfoque tiene menos soporte 1 , sugeriría seguir con el enfoque mencionado anteriormente.

1 Aunque parece funcionar en Chrome / FF, no funciona en IE (el primer método funciona en todos los navegadores actuales).

Josh Crozier
fuente
3
Tanto el trabajo como la OMI, las dos opciones mencionadas aquí son el mejor enfoque. Prefiero la flexboxopción porque con calcusted necesita saber la cantidad de espacio para deducir de vh. Con flexboxun simple lo flex-grow:1hace.
Kilmazing
39

Puedes hacerlo DOCTYPE, pero tienes que usarlo table. Mira esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
ducu
fuente
1
al menos no necesita js !! pero es seguro para la web?
Ali Shakiba
1
La desventaja de esta solución es que html, body {overflow: hidden;} eliminará los desplazamientos de página.
Ali Shakiba
Estoy tratando de agregar el pie de página en el código anterior pero el pie de página no se muestra. ¿Puedes por favor ayudarme?
Akshay Raut
18

Tal vez esto ya haya sido respondido (algunas respuestas anteriores son formas "correctas" de hacerlo), pero pensé que también agregaría mi solución también.

Nuestro iFrame se carga dentro de un div, por lo tanto, necesitaba algo más que window.height. Y al ver que nuestro proyecto ya depende en gran medida de jQuery, creo que esta es la solución más elegante:

$("iframe").height($("#middle").height());

Donde, por supuesto, "#middle" es el id del div. Lo único que deberá hacer es recordar este cambio de tamaño cada vez que el usuario cambie el tamaño de la ventana.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
Tim Geerts
fuente
7

Esto es lo que hice. Tuve el mismo problema y terminé buscando recursos en la web durante horas.

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

Agregué esto a la sección principal.

Tenga en cuenta que mi iframe se encuentra dentro de la celda central de una tabla que tiene 3 filas y 1 columna.

Danut Milea
fuente
Su código solo funcionará si el TD que contiene el IFRAME tiene una altura: 100%. Funcionará si la tabla está contenida dentro de un elemento DIV, porque tiene un estilo para que todos los divs tengan altura: 100%.
Nikola Petkanski
6

El código MichAdel funciona para mí, pero realicé algunas modificaciones menores para que funcione correctamente.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
asimrafi
fuente
4

Es correcto, está mostrando un iframe con una altura del 100% con respecto a su contenedor: el cuerpo.

Prueba esto:

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

Por supuesto, cambie la altura del segundo div a la altura que desee.

ARemesal
fuente
8
30px + 90%! = 100%
stepancheg
1
podría usar calc (100% - 30px) en lugar de 90%
Justin E
4

prueba lo siguiente:

<iframe name="" src="" width="100%" style="height: 100em"/>

funciono para mi

sree
fuente
44
No llena al padre, solo pone una gran altura en el iframe.
Ben
3

Puede hacer esto con html / css de esta manera:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
vdbuilder
fuente
2

Nuevo en HTML5: use calc (en altura)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
Stefan Steiger
fuente
2

Usé display: table para solucionar un problema similar. Es casi funciona para este, dejando una pequeña barra de desplazamiento vertical. Si está tratando de llenar esa columna flexible con algo que no sea un iframe, funciona bien (no

Tome el siguiente HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

Cambie el div externo para usar display: table y asegúrese de que tenga un ancho y una altura establecidos.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

Convierta el banner en una fila de la tabla y establezca su altura a la que prefiera:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

Agregue un div adicional alrededor de su iframe (o cualquier contenido que necesite) y conviértalo en una fila de tabla con una altura establecida al 100% (establecer su altura es fundamental si desea incrustar un iframe para llenar la altura)

.iframe-container {
  display: table-row;
  height: 100%;
}

A continuación se muestra un jsfiddle que lo muestra en el trabajo (sin un iframe porque no parece funcionar en el violín)

https://jsfiddle.net/yufceynk/1/

daamsie
fuente
1

Creo que tienes un problema conceptual aquí. Para decir "Intenté establecer la altura: 100% en el iframe, el resultado está bastante cerca pero el iframe intentó llenar toda la página" , bueno, ¿cuándo "100%" no ha sido igual a "todo"?

Le ha pedido al iframe que llene toda la altura de su contenedor (que es el cuerpo) pero desafortunadamente tiene un hermano de nivel de bloque en el <div> por encima del cual ha pedido que sea 30px grande. ¡Por lo tanto, ahora se solicita que el total del contenedor principal se ajuste al 100% + 30px> 100%! De ahí las barras de desplazamiento.

Lo que creo que quiere decir es que le gustaría que el iframe consuma lo que queda como los marcos y las celdas de la tabla, es decir, altura = "*". IIRC esto no existe.

Desafortunadamente, que yo sepa, tampoco hay forma de mezclar / calcular / restar unidades absolutas y relativas, así que creo que estás reducido a dos opciones:

  1. Coloque su div absolutamente, lo que lo sacará del contenedor para que el iframe solo consuma la altura de sus contenedores. Sin embargo, esto te deja con todo tipo de otros problemas, pero quizás por lo que estás haciendo, la opacidad o la alineación estarían bien.

  2. Alternativamente, debe especificar un% de altura para el div y reducir la altura del iframe en esa medida. Si la altura absoluta es realmente tan importante, deberás aplicar eso a un elemento secundario del div.

annakata
fuente
1

Después de haber probado la ruta CSS por un tiempo, terminé escribiendo algo bastante básico en jQuery que hizo el trabajo por mí:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

Probado en IE8, Chrome, Firefox 3.6

Ben B
fuente
1

Funcionará con el código mencionado a continuación

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
monseñor
fuente
1

Respuesta similar de @MichAdel, pero estoy usando JQuery y más elegante.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id es la ID de la etiqueta iframe

Roy Shmuli
fuente
0

Puede hacer esto midiendo el tamaño del cuerpo en eventos de carga / cambio de tamaño y estableciendo la altura en (altura completa - altura del banner).

Tenga en cuenta que actualmente en IE8 Beta2 no puede hacer esto de gran tamaño ya que ese evento está actualmente roto en IE8 Beta2.

scunliffe
fuente
0

o puedes ir a la vieja escuela y usar un conjunto de marcos tal vez:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Amir Arad
fuente
2
@vdbuilder: No, solo es válido pre-html5. Apuesto a que todavía funciona. ;-)
TJ Crowder
0

Si bien estoy de acuerdo en que JS parece una mejor opción, tengo una solución de trabajo única de CSS. La desventaja es que si tiene que agregar contenido a su documento html de iframe con frecuencia, tendrá que adaptar un porcentaje de tiempo mínimo.

Solución:

Intente no especificar ninguna altura para AMBOS documentos html,

html, body, section, main-div {}

entonces solo codifique esto:

#main-div {height:100%;}
#iframe {height:300%;}

nota: el div debería ser tu sección principal.

Esto debería funcionar relativamente. el iframe calcula exactamente el 300% de la altura de la ventana visible. Si el contenido html del segundo documento (en el iframe) tiene una altura menor que 3 veces la altura de su navegador, funciona. Si no necesita agregar contenido con frecuencia a ese documento, esta es una solución permanente y podría encontrar su propio% necesario de acuerdo con la altura de su contenido.

Esto funciona porque evita que el segundo documento html (el incrustado) herede su altura del documento html principal. Lo impide porque no especificamos una altura para ambos. Cuando le damos un% al niño, busca a su padre, si no, toma su altura de contenido. Y solo si los otros contenedores no tienen alturas, por lo que probé.

pixelfe
fuente
0

El atributo " sin interrupciones " es un nuevo estándar que apunta a resolver este problema:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Al asignar este atributo, eliminará los bordes y las barras de desplazamiento y ajustará el iframe a su tamaño de contenido. aunque solo es compatible con Chrome y la última versión de Safari

más sobre esto aquí: HTML5 iFrame Seamless Attribute

usuario2254487
fuente
El atributo sin fisuras se eliminó de la especificación HTML 5.
Eric Steinborn
0

Una solución simple de jQuery

Use esto en un script dentro de la página iframed

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
UnLoCo
fuente
0

no puede establecer la altura del iframe en% porque la altura de su cuerpo principal no es del 100%, por lo tanto, haga que la altura del padre sea del 100% y luego aplique la altura del iframe al 100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
Pravin Abhale
fuente
0

Si tiene acceso al contenido del iframe que se cargará, puede decirle a su padre que cambie el tamaño cada vez que cambie el tamaño.

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Si tiene más de un iframe en la página, es posible que necesite usar id u otros métodos inteligentes para mejorar .find ("iframe") para que esté seleccionando el correcto.

Stephen
fuente
0

Creo que la mejor manera de lograr este escenario usando la posición css. establezca la posición relativa a su div principal y la posición: absoluta a su iframe.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
Expandir fragmento

para otros problemas de relleno y margen ahora, css3 calc () es muy avanzado y es compatible principalmente con todos los navegadores.

comprobar calc ()

Jay Patel
fuente
0

¿Por qué no hacer esto (con ajustes menores para el relleno / márgenes del cuerpo)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
acceso permitido
fuente
Necesita reemplazar -0con +'px'al final. ¿Funciona en dispositivos móviles?
Dmitri Zaitsev