html - guia - Unidades de la ventana de CSS Calc ¿Solución temporal?
qgis manual (3)
Por lo que he visto en otras respuestas , las unidades de visualización de CSS no se pueden usar aún en las declaraciones de calc() . Lo que me gustaría lograr es la siguiente declaración:
height: calc(100vh - 75vw)
¿Existe alguna forma alternativa de lograr esto utilizando solo CSS aunque las unidades de ventana gráfica no se puedan usar en la declaración de calc() ? ¿O solo CSS y HTML? Sé que puedo hacerlo dinámicamente usando javascript, pero prefiero CSS.
Como solución alternativa, puede usar el hecho de que el margen vertical y el margen de porcentaje se calculan a partir del ancho del contenedor. Es una solución bastante fea y no sé si podrás usarla pero bueno, funciona: http://jsfiddle.net/bFWT9/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
Antes de responder a esto, me gustaría señalar que Chrome e IE 10+ son compatibles con Calc con unidades de visualización.
FIDDLE (En IE10 +)
Solución (para otros navegadores): tamaño de caja
1) Comience por establecer su altura como 100vh.
2) Con el tamaño de caja establecido en el borde-casillero, agregue un relleno de 75vw. Esto significa que el relleno será parte de la altura interior.
3) Simplemente compensar el relleno adicional con un margen negativo superior
VIOLÍN
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
<div>It''s working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
Comprueba aquí que este código CSS ahora es compatible con Todos los navegadores sin Opera
Vivir