Presta atención ya que en esta división hallarás el hallazgo que buscas.
Solución:
Debe asegurarse de que el html y el cuerpo estén configurados al 100% y también asegúrese de agregar prefijos de proveedores para calc, así que -moz-calc, -webkit-calc.
Siguientes trabajos CSS:
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 configuré su margen/relleno en 0 en html y cuerpo, de lo contrario, habría una barra de desplazamiento cuando se agregue.
Aquí hay un violín actualizado
http://jsfiddle.net/UF3mb/10/
El soporte del navegador es: IE9+, Firefox 16+ y con proveedor prefix Firefox 4+, Chrome 19+, Safari 6+
En primer lugar, verifique con Firebug (o cualquiera que sea su preferencia) si el navegador está interpretando la propiedad css. A veces, la herramienta utilizada le dará el problema allí mismo, así que no busque más.
En segundo lugar, compruebe la compatibilidad: http://caniuse.com/#feat=calc
Y tercero: me encontré con algunos problemas hace unas horas y los resolví. Es la cosa más pequeña, 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);
Se ve bien, ¿no? INCORRECTO Así es como debería verse:
#someElement
height:calc(100% - 100px);
height:-moz-calc(100% - 100px);
height:-webkit-calc(100% - 100px);
Se ve igual verdad?
Fíjate en los espacios!!!
Navegador de Android comprobado, Firefox para Android, Chrome para Android, Chrome y Firefox para Windows e Internet Explorer 11. Todos ignoraron el CSS si no había espacios.
Espero que esto ayude a alguien.
Estaba buscando por qué % no parece funcionar. Entonces, probé usando 100vh en lugar de 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 una altura de 68 px. Lo siguiente no funciona para mí en absoluto haciendo solo %
height: calc(100% - 68px);
No hubo cambio. La página se quedó igual. Sin embargo, al cambiar esto a “vh”, ¡funciona muy bien! El bloque div que le asigne también permanecerá en la altura del dispositivo del espectador únicamente. Hasta que deciden desplazarse hacia abajo en la página.
height: calc(100vh - 68px);
Cambie el +/- para incluir qué tan grande es su encabezado en la parte superior. Si su barra de navegación tiene una altura de 120 px, cambie 68 px a 120 px.
Espero que esto ayude a cualquiera que no pueda hacer que esto funcione con el uso normal altura: calc();
Agradecemos que quieras añadir valor a nuestro contenido informacional aportando tu veteranía en las notas.