Función calc
La función calc permite realizar
cálculos de valores de propiedades CSS. La función
toma como parámetro una expresión matemática,
el resultado del cálculo del cual
puede ser utilizado como valor de propiedad CSS.
La expresión puede incluir operadores
+, -, *, /.
Sintaxis
selector {
propiedad: calc(expresión);
}
Ejemplo
Hagamos que el ancho del bloque sea
igual a 100% del ancho del elemento padre, menos
50px:
<div id="parent">
<div id="child"></div>
</div>
#child {
width: calc(100% - 50px);
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid green;
}
: