html - content - iframe responsive height
iFrame Height Auto(CSS) (8)
@SweetSpice, use posición como absoluta en lugar de relativa. Funcionará
#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
Estoy teniendo problemas con mi iframe. Realmente quiero que el marco ajuste automáticamente las alturas de acuerdo con el contenido dentro del iframe. Tengo muchas ganas de hacer esto a través del CSS sin javascript. Sin embargo, usaré javascript si tengo también.
He intentado 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 codificación de la página se ve así ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Tenga en cuenta que la URL dentro del iframe es diferente al sitio web donde se mostrará el iframe. Sin embargo, tengo acceso a ambos sitios web.
¿Alguien puede ayudar?
Debes tener en cuenta que la etiqueta div se comporta como nada y te permite poner algo en ella. Significa que si inserta un párrafo con 100 líneas de texto dentro de una etiqueta div , muestra todo el texto, pero su altura no cambiará para contener todo el texto.
Así que tienes que usar un truco de 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 #wrap en su archivo CSS pero no tiene ninguna etiqueta con este ID. En resumen tienes que cambiar tu código a algo como a continuación:
Código HTML:
<!-- Change "id" from "container" to "wrap" -->
<div id="wrap">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
<!-- Add this line -->
<div class="clear"></div>
</div>
<div id="footer">
</div>
<!-- Add this line -->
<div class="clear"></div>
</div>
Y también agrega esta línea a tu archivo CSS:
.clear{ display: block; clear: both;}
Esta es mi solución PURE CSS :)
Añadir, desplazando sí a su iframe.
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>
El truco :)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>
No tienes que preocuparte por la capacidad de respuesta :)
Segun este post
Debe agregar el modificador css !important a sus porcentajes de altura.
Espero que esto ayude.
Tienes que usar absolute posición absolute junto con tu altura deseada. en su CSS, haga lo siguiente:
#id-of-iFrame {
position: absolute;
height: 100%;
}
Tuve este mismo problema pero encontré lo siguiente que funciona muy bien:
La clave para crear una inserción de YouTube receptiva es con el relleno y un elemento contenedor, que le permite darle una relación de aspecto fija. También puede utilizar esta técnica con la mayoría de las demás incrustaciones basadas en iframe, como presentaciones de diapositivas.
Así es como se ve un código de inserción de YouTube típico, con ancho y altura fijos:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
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 tal (tenga en cuenta los nombres de las clases y la eliminación del ancho y la altura):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
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, probablemente necesitará ajustar el padding-bottom: 56.25%; para obtener la altura correcta.
hjpotter92
Agregue esto a su sección:
<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + ''px''; } </script>Y cambia tu iframe a esto:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Se publica Here
Sin embargo, sí usa javascript, pero es un código simple y fácil de usar que solucionará su problema.
<div id="content" >
<h1>Update Information</h1>
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
#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;
}