Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor.

Lamentablemente con calc() no podemos trabajar con valores expresados en otras propiedades (como las útiles variables de preprocesadores CSS), sino que se deben trabajar con valores definidos como se ve en el siguiente ejemplo:

width: calc(100%  - 10px);

Puedes utilizar las siguientes operaciones:

  • + (suma)
  • – (resta)
  • ***** (multiplicación)
  • / (división)

Como ves en el ejemplo, puedes utilizar diferentes unidades en tu expresión de cálculo, y no se te ocurra dividir por cero (0).

Soporte: IE9+, Firefox 16+ (sin prefijo), Chrome 26+ (sin prefijo), Safari 6+.

Links: