content contenido bootstrap autoajustable html css iframe

html - contenido - Hacer Iframe para adaptarse al 100% de la altura restante del contenedor



iframe responsive bootstrap (26)

Aquí hay algunos enfoques modernos:

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

    La expresión calc(100vh - 30px) representa la altura restante. Donde 100vh es 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>

    Soporte para calc() aquí ; soporte para las unidades relativas de viewport aquí .

  • Enfoque 2 - enfoque Flexbox

    Ejemplo aquí

    Establezca la display del elemento padre común para flex , junto con flex-direction: column (suponiendo que desea que los elementos se apilen uno encima del otro). Luego, establezca flex-grow: 1 en el elemento iframe hijo para que llene 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>

    Dado que este enfoque tiene menos apoyo 1 , sugeriría ir 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).

Quiero diseñar una página web con un banner y un iframe. Espero que el iframe pueda llenar todo el alto de la página y que se redimensione automáticamente a medida que el navegador redimensiona. ¿Es posible hacerlo sin escribir código Javascript, solo con CSS?

Intenté establecer la height:100% en iframe, el resultado es bastante cercano, pero el iframe intentó completar toda la altura de la página, incluida la altura de 30px del elemento div 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 con éxito la altura total de una página web, pero el truco no funcionó en 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>

Cualquier idea es apreciada.

Creo que la mejor manera de lograr este escenario utilizando la posición css. establezca la posición relativa a su div padre y 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>

para otros problemas de relleno y margen, hoy en día css3 calc () es muy avanzado y, en su mayoría, compatible con todos los navegadores.

comprobar calc ()

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

Le has pedido al iframe que llene toda la altura de su contenedor (que es el cuerpo) pero desafortunadamente tiene un hermano a nivel de bloque en el <div> por encima del cual has pedido que sea 30px grande. Por lo tanto, ¡ahora se está pidiendo al total del contenedor principal que dimensione al 100% + 30px> 100%! Por lo tanto scrollbars.

Lo que creo que quieres decir es que te gustaría que el iframe consumiera lo que queda como pueden hacerlo los marcos y las celdas de la tabla, es decir, height = "*". IIRC esto no existe.

Desafortunadamente, a mi entender, no hay manera de mezclar / calcular / restar efectivamente unidades absolutas y relativas, así que creo que está reducido a dos opciones:

  1. Coloque absolutamente su div, que lo sacará del contenedor para que el iframe solo consuma su altura de 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 podrían estar bien.

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

El código MichAdel funciona para mí, pero hice algunas modificaciones menores para que funcionara 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;

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

Para resumir una larga historia, existe el "elemento principal", que no es necesario para el elemento principal. En pocas palabras, es el primer elemento de la jerarquía que tiene posición: relativa o posición: absoluta. O el elemento del cuerpo en sí 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 en el mismo tamaño. Si hubiera algo más allí, entonces podría obtener el contenido de un "bloque que contiene" que es más grande que él mismo (por lo tanto, "desbordado").

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 superior, contra el cual se puede calcular el 100%, es el elemento del cuerpo (o html? No está seguro), y se estira lo suficiente como para contener su contenido. Especificar altura: 100% no tendrá efecto, ya que no tiene "elemento padre" contra el que medir el 100%. La ventana en sí no cuenta. ;)

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

  1. Usar JavaScript
  2. No utilice DOCTYPE. Esto no es una buena práctica, pero coloca a los navegadores en "modo peculiar", en el que puede hacer altura = "100%" en los elementos y los extenderá al tamaño de la ventana. Tenga en cuenta que es probable que el resto de su página también deba cambiarse para adaptarse a los cambios de DOCTYPE.

Actualización: no estoy seguro de si ya no estaba equivocado cuando publiqué esto, pero ciertamente esto ya no está actualizado. 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 tu situación.

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

La única excepción es cuando tienes que soportar algo como IE5 o algo. Si estás allí, entonces estás por tu cuenta 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í te ayudarán con ellos. En el lado positivo, si estás allí, probablemente solo tengas que ser compatible con UN tipo de navegador, que elimina los problemas de compatibilidad.

¡Buena suerte!

Actualización 2: ¡Hey, 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 sepa 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>

Algunas notas: el contenedor de la second-row es necesario porque la bottom: 0 y la right: 0 no funciona en iframes por alguna razón. Algo que ver con ser un elemento "reemplazado". Pero width: 100% y height: 100% funciona bien. display: block es necesario porque es un elemento en inline por defecto y el espacio en blanco comienza a crear desbordamientos extraños de lo contrario.

Opción 2 - tablas. Funciona cuando no sabes la altura de la primera parte. Puede usar las etiquetas <table> reales o hacerlo de forma elegante con 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>

Algunas notas - el overflow: auto se asegura de que la fila siempre incluya todos sus contenidos. De lo contrario, los elementos flotantes a veces pueden desbordarse. La height: 100% en la segunda fila asegura que se expanda tanto como pueda apretar la primera fila tan pequeña como sea posible.

Opción 3 - flexbox. El más limpio de todos, pero con un soporte de navegador menos que estelar. IE10 necesitará prefijos -ms- para las propiedades de flexbox, y cualquier otra cosa no lo soportará 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>

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

Es correcto, estás mostrando un iframe con 100% de altura 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.

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>

He añadido esto a la sección de la cabeza.

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

Funcionará con el código mencionado abajo

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

Habiendo 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

Nuevo en HTML5: Usa 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>

Otra forma de hacerlo sería utilizar la position: fixed; en el nodo padre.
Si no me equivoco, position: fixed; vincula el elemento a la ventana gráfica, por lo tanto, una vez que proporcione este width: 100%; nodo width: 100%; y height: 100%; propiedades, se extenderá sobre toda la pantalla. A partir de este momento, puede poner la etiqueta <iframe> dentro de ella y extenderla sobre el espacio restante (tanto en ancho como en alto) con un width: 100%; height: 100%; simple width: 100%; height: 100%; 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://.com/"> Your browser does not support inline frames. </iframe> </div> </body> </html>

Por qué no hacer esto (con un ajuste menor para el relleno del cuerpo / márgenes)

<script> var oF = document.getElementById("iframe1"); oF.style.height = document.body.clientHeight - oF.offsetTop - 0; </script>

Puede hacer esto midiendo el tamaño del cuerpo en los 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 en un tamaño mayor, ya que el evento actualmente no funciona en IE8 Beta2.

Puedes hacer esto con html / css así:

<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>

Puedes hacerlo con DOCTYPE , pero tienes que usar 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>

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 el ID de la etiqueta iframe

Si bien estoy de acuerdo con que JS parece ser una mejor opción, tengo una solución que funciona solo con CSS. La desventaja es que si tiene que agregar contenido a su documento iframe html con frecuencia, tendrá que adaptar un porcentaje a través del tiempo.

Solución:

Trate de no especificar ninguna altura para AMBOS sus documentos html,

html, body, section, main-div {}

entonces solo codifica esto:

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

Nota: el div debe 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 a 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 que está 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 a los otros contenedores no se les dan alturas, por lo que he intentado.

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''s u otros métodos inteligentes para mejorar .find ("iframe") de modo que esté seleccionando el correcto.

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

Nuestro iFrame está cargado dentro de un div, por lo tanto, necesitaba algo más que window.height. Y ver que nuestro proyecto ya se basa en gran medida en 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()); });

Una solución jQuery simple

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(); } }

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: ifm es el ID de iframe

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

Utilicé display: table para solucionar un problema similar. Casi funciona para esto, dejando una pequeña barra de desplazamiento vertical. Si está intentando rellenar esa columna flexible con algo que no sea un iframe, funciona bien (no

Toma 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 exterior 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 lo que prefiera:

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

Agregue un div adicional alrededor de su iframe (o el contenido que necesite) y conviértalo en una fila de la tabla con la altura establecida en 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 eso no parece funcionar en el violín)

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

intente lo siguiente:

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

funciono para mi

no puede establecer la altura del iframe en% porque la altura del cuerpo del padre no es del 100%, por lo que debe establecer la altura del padre como 100% y luego aplicar 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>

o puedes ir a la vieja escuela y usar un frameset tal vez:

<frameset rows="30,*"> <frame src="banner.swf"/> <frame src="inner.html" /> </frameset>