iFrame Height Auto (CSS)

Estoy teniendo problemas con mi iframe. Realmente quiero que el marco ajuste automáticamente las alturas de acuerdo con el contenido dentro del iframe. Realmente quiero hacer esto a través del CSS sin javascript. Sin embargo, usaré Javascript si tengo también.

Probé la height: 100%; y height: auto; , etc. ¡No sé qué más probar!

Aquí está mi CSS. Para el marco …

 #frame { position: relative; overflow: hidden; width: 860px; height: 100%; } 

Y luego para la página del marco.

 #wrap { float: left; position: absolute; overflow: hidden; width: 780px; height: 100%; text-align: justify; font-size: 16px; color: #6BA070; letter-spacing: 3px; } 

La encoding de la página se ve así …

      ...    

Update Information

Tenga en cuenta que la URL dentro del iframe es diferente del sitio web en el que se mostrará el iframe. Sin embargo, tengo acceso a ambos sitios web.

¿Alguien puede ayudar?

Tuve este mismo problema pero encontré lo siguiente que funciona muy bien:

La clave para crear una inserción de YouTube receptiva es con relleno y un elemento de contenedor, lo que le permite darle una relación de aspecto fija. También puede utilizar esta técnica con la mayoría de las otras incorporaciones basadas en iframe, como las presentaciones de diapositivas.

Aquí se muestra el típico código de inserción de YouTube, con ancho y alto fijos:

   

Sería bueno si pudiéramos darle un ancho del 100%, pero no funcionará ya que la altura permanece fija. Lo que debe hacer es envolverlo en un contenedor como ese (tenga en cuenta los nombres de clase y la eliminación del ancho y la altura):

  

Y usa el siguiente CSS:

  .container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Aquí está la página en la que encontré la solución:

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Dependiendo de su relación de aspecto, es probable que necesite ajustar el padding-bottom: 56.25%; para obtener la altura correcta.

Esta es mi solución PURE CSS 🙂

Agregue, desplazando sí a su iframe.

  

El truco 🙂

  

No necesita preocuparse por la capacidad de respuesta 🙂

@SweetSpice, use la posición como absoluta en lugar de relativa. Funcionará

 #frame{ overflow: hidden; width: 860px; height: 100%; position: absolute; } 
  

Update Information

#support-box { width: 50%; float: left; display: block; height: 20rem; /* is support box height you can change as per your requirement*/ background-color:#000; } #wrapper { width: 90%; display: block; position: relative; top: 50%; transform: translateY(-50%); background:#ddd; margin:auto; height:100px; /* here the height values are automatic you can leave this if you can*/ } #wrapper iframe { width: 100%; display: block; padding:10px; margin:auto; }

https://jsfiddle.net/umd2ahce/1/

hjpotter92

Agregue esto a su sección:

  

Y cambie su iframe por esto:

  

Está publicado aquí

Sin embargo, utiliza javascript, pero es un código simple y fácil de usar que solucionará su problema.

Debe usar absolute posición absolute junto con la altura deseada. en tu CSS, haz lo siguiente:

 #id-of-iFrame { position: absolute; height: 100%; } 

Debes tener en cuenta que la etiqueta div se comporta como nada y solo te permite poner algo en ella. Significa que si inserta un párrafo con 100 líneas de texto dentro de una etiqueta div , se muestra todo el texto pero su altura no cambiará para contener todo el texto.

Entonces debes usar un truco CSS y HTML para manejar este problema. Este truco es muy simple. debe usar una etiqueta div vacía con class = “clear” y luego tendrá que agregar esta clase a su CSS. También tenga en cuenta que tiene # envoltura en su archivo CSS, pero no tiene ninguna etiqueta con esta identificación. En resumen, debes cambiar tu código a algo como a continuación:

Código HTML:

   

Update Information

Y también agregue esta línea a su archivo CSS:

 .clear{ display: block; clear: both;} 

De acuerdo con esta publicación

Necesita agregar el modificador css !important a sus porcentajes de altura.

Espero que esto ayude.