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

cssselector {
  propiedad: calc(expresión);
}

Ejemplo

Hagamos que el ancho del bloque sea igual a 100% del ancho del elemento padre, menos 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Véase también