Altura CSS3: calc(100%) no funciona
Tengo un div que quiero llenar toda la altura del cuerpo menos un número establecido en píxeles. Pero no puedo conseguir altura: calc(100% - 50px) para trabajar.
(La razón por la que quiero hacer esto es que tengo elementos que tienen alturas dinámicas basadas en algunos criterios variables, por ejemplo, la altura de los cambios de encabezado basados en diferentes elementos que puede contener. Un div de contenido entonces necesita estirarse para llenar el resto del espacio disponible.)
El elemento div sin embargo permanece la altura de la contenido-no parece que interprete el 100% como la altura del elemento del cuerpo.
HTML :
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
CSS :
body {background: blue; height:100%;position:relative;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; background:yellow}
#theCalcDiv {background:green; height: calc(100% - (20px + 30px + 20px)); display:block}
Ver violín: http://jsfiddle.net/ElizabethMeyer/UF3mb/.
Agradecería cualquier ayuda o sugerencias en la dirección correcta.
7 answers
Debe asegurarse de que el html y el cuerpo estén configurados al 100% y también asegúrese de agregar prefijos de proveedor para calc, so-moz-calc, -webkit-calc.
El siguiente CSS funciona:
html,body {
background: blue;
height:100%;
padding:0;
margin:0;
}
header {
background: red;
height: 20px;
width:100%
}
h1 {
font-size:1.2em;
margin:0;
padding:0;
height: 30px;
font-weight: bold;
background:yellow
}
#theCalcDiv {
background:green;
height: -moz-calc(100% - (20px + 30px));
height: -webkit-calc(100% - (20px + 30px));
height: calc(100% - (20px + 30px));
display:block
}
También establezco su margen/relleno a 0 en html y cuerpo, de lo contrario habría una barra de desplazamiento cuando se agrega esto.
Aquí está un violín actualizado
Http://jsfiddle.net/UF3mb/10 /
El soporte del navegador es: IE9+, Firefox 16 + y con el prefijo del proveedor Firefox 4+, Chrome 19+, Safari 6+
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-23 08:56:41
En primer lugar, verifique con Firebug(o lo que sea que prefiera) si la propiedad css está siendo interpretada por el navegador. A veces la herramienta utilizada le dará el problema allí mismo, así que no más caza.
Segunda compatibilidad fuera de comprobación: http://caniuse.com/#feat=calc
Y tercero - me encontré con algunos problemas hace unas horas y acabo de resolverlo. Es lo más pequeño, pero me mantuvo ocupado durante 30 minutos.
Así es como se veía mi CSS
#someElement {
height:calc(100%-100px);
height:-moz-calc(100%-100px);
height:-webkit-calc(100%-100px);
}
Parece correcto, ¿no? EQUIVOCADA Así es como debería verse:
#someElement {
height:calc(100% - 100px);
height:-moz-calc(100% - 100px);
height:-webkit-calc(100% - 100px);
}
Parece el mismo derecho?
¡Fíjate en los espacios!!! Comprobado navegador Android, Firefox para Android, Chrome para Android, Chrome y Firefox para Windows e Internet Explorer 11. Todos ellos ignoraron el CSS si no había espacios.
Espero que esto ayude a alguien.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-13 13:56:21
Estaba buscando por qué % no parece funcionar. Por lo tanto, probé usando 100vh en lugar de simplemente configurarlo al 100%, parece que 100vh funciona muy bien en casi todos los navegadores/dispositivos.
Ejemplo: desea mostrar solo el div superior al usuario antes de que se desplace, como un módulo de banner de héroe. Pero, en la parte superior de la página hay una barra de navegación que tiene 68px de altura. Lo siguiente no funciona para mí en absoluto haciendo solo %
height: calc(100% - 68px);
No hubo ningún cambio. La página se quedó igual. Sin embargo, al cambiar esto a "vh" en su lugar funciona muy bien! El bloque div que le asigne también permanecerá solo en la altura del dispositivo del espectador. Hasta que decidan desplazarse por la página.
height: calc(100vh - 68px);
Cambie el +/- para incluir el tamaño de su encabezado en la parte superior. Si su barra de navegación es decir 120px en altura, cambie 68px a 120px.
Espero que esto ayude a cualquier persona que no pueda obtener esto trabajando con el uso normal altura: calc();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-29 14:23:25
Intente establecer html y body a altura 100%;
html, body {background: blue; height:100%;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-23 08:49:21
Todos los elementos padre en la jerarquía deben tener una altura del 100%. Simplemente dale max-height: 100% al elemento y max-height:calc (100% - 90px) al elemento primario inmediato.
Funcionó para mí en IE también.
html,
body {
height: 100%
}
parent-element {
max-height: calc(100% - 90px);
}
element {
height:100%;
}
El renderizado en IE falla debido a un fallo de Calc cuando se cambia el tamaño de la ventana o se cargan datos en DOM. Pero este método mencionado anteriormente funcionó para mí incluso en IE.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-28 08:02:01
No necesitas calcular nada, y probablemente no deberías:
<!DOCTYPE html>
<head>
<style type="text/css">
body {background: blue; height:100%;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0;
height: 30px; font-weight: bold; background:yellow}
.theCalcDiv {background-color:green; padding-bottom: 100%}
</style>
</head>
<body>
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.
</div>
Lo uní todo por brevedad.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-23 09:23:12
Si estilizas calc en un proyecto GWT, es posible que su analizador no analice calc para ti como no lo hizo para mí... la solución es envolverlo en un literal css así:
height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-29 08:58:47