tamaños - Unidades CSS vh dentro de un iframe
vh css w3schools (2)
Estoy tratando de usar unidades CSS vh dentro de un iframe. Estoy encontrando que se escalan al tamaño del iframe de alguna manera. En otras palabras, 100vh no es la altura de la ventana. Se establece a la altura del iframe.
¿Esto parece correcto?
¿Hay una solución?
Esta es una excelente pregunta. Lamentablemente, no he podido encontrar una solución en CSS, pero he podido encontrar una solución en JavaScript que creo que es la mejor opción en este momento. Recuerde que los marcos deben estar en el mismo dominio para que esto funcione.
Espero que esto ayude. Si esta respuesta necesita mejorar, por favor comente abajo :-)
Solución en la teoría (no se puede usar aquí en SO debido a un problema de origen del marco):
window.addEventListener(''load'',function(){
initializeV();
function initializeV(){
//1% of the parent viewport width (same as 1vw):
var vw = window.parent.innerWidth/100;
//1% of the viewport height (same as 1vh):
var vh = window.parent.innerHeight/100;
//assign width and height to your v unit elements here
}
window.parent.addEventListener(''resize'',function(){
//when the browser window is resized; recalculate
initializeV();
});
});
Edición (diciembre de 2018): en los comentarios, se me pidió que proporcionara un ejemplo. No puedo dar un ejemplo exacto porque los códigos de código en se cargan en un origen de marco diferente al de la página. Sin embargo, puedo imitar el efecto. Para aplicaciones prácticas, consulte el fragmento de código anterior. Este fragmento de código está destinado simplemente a ilustrar cómo funciona.
Aplicación práctica. Utiliza el concepto explicado anteriormente pero sin marco de referencia.
window.addEventListener(''load'',function(){
initializeV();
function initializeV(){
//note: I can''t use window.parent becuase the code snippet loads on a different frame than the parent page. See the other snippet for a practical example. This snippet is meant to merely illustrate the effect.
//1% of the parent viewport width (same as 1vw):
var vw = window.innerWidth/100;
//1% of the viewport height (same as 1vh):
var vh = window.innerHeight/100;
//this is where the magic happens. Simply set width/height/whatever to a multiple of vw/vh and add ''px''. Dimensions must be in pixels since the vw/vh measurement is based on pixels.
document.getElementById(''test'').style.width = 30*vw+''px'';
document.getElementById(''test'').style.height = 50*vh+''px'';
//assign width and height to your v unit elements here
}
window.addEventListener(''resize'',function(){
//when the browser window is resized; recalculate
initializeV();
});
});
#test{
background:red;
}
<div id="test"></div>
Sé que esta es una pregunta antigua, pero a medida que las personas se mueven hacia la unidad vh , esta pregunta se volverá mucho más común.
Para aclarar, he aquí un ejemplo del problema. Tenemos un archivo HTML que carga un iframe :
<!DOCTYPE html>
<html>
<head></head>
<style>
iframe {
height: 50vh;
width: 100%;
}
</style>
<body>
<iframe src="iframe.html"/>
</body>
</html>
Y su iframe :
<!DOCTYPE html>
<html>
<head></head>
<style>
div {
height: 50vh;
width: 100%;
background: blue;
}
</style>
<body>
<div></div>
</body>
</html>
Lo importante a tener en cuenta aquí es que tanto el iframe como el elemento div iframe''s están designados con una altura de 50vh . El comportamiento deseado puede ser que el iframe respete la altura o el ancho de la ventana gráfica del contexto principal. En cambio, el resultado se ve así:
Es decir, la altura del elemento azul es ~ 25% de la ventana del navegador, en lugar del 50% esperado (100% del iframe ). Si bien es posible que deseemos que el iframe respete la ventana gráfica de su matriz, este es un buen ejemplo de lo poco intuitivo que puede ser, aunque seguramente hará que las unidades v* más valiosas para el contenido que es iframe ''d. El problema tiene que ver con cómo se determina la altura de la ventana gráfica.
De la especificación :
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene . Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia.
Tanto un iframe como la ventana del navegador pueden ser el bloque inicial de contención , ya que ambos son viewports válidos. Una ventana gráfica no se limita a la ventana del navegador, sino que se define como una ventana u otra área de visualización en la pantalla a través de la cual los usuarios consultan un documento .
Un iframe crea un contexto de navegación anidado cuando se inserta en un documento y, por lo tanto, tiene su propia ventana gráfica.
Así que sí, este es el comportamiento deseado, y desafortunadamente no hay una solución CSS pura. Sin embargo, www139 ha proporcionado un ejemplo de cómo se puede lograr esto utilizando JavaScript. El problema con esto comienza cuando el tamaño de muchos elementos se controla usando unidades v* .