Función calc() de CSS

Definición y uso

La función calc() de CSS calc() La función realiza el cálculo y usa el resultado como valor del atributo.

Ejemplo

Usar calc() Calcular el ancho del elemento <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

Prueba por ti mismo

Sintaxis de CSS

calc(expression)
Valor Descripción
expression

Obligatorio. Una expresión matemática, cuyo resultado se usará como valor.

Se pueden usar los siguientes operadores: +, -, *, /.

Detalles técnicos

Versión: CSS3

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero respaldó esta función.

Chrome Edge Firefox Safari Opera
26 9 16 7 15

Páginas relacionadas

Referencia:Función acos() de CSS

Referencia:Función asin() de CSS

Referencia:Función atan() de CSS

Referencia:Función atan2() de CSS

Referencia:Función cos() de CSS

Referencia:Función exp() de CSS

Referencia:Función hypot() de CSS

Referencia:Función log() de CSS

Referencia:Función mod() de CSS

Referencia:Función pow() de CSS

Referencia:Función sin() de CSS

Referencia:Función sqrt() de CSS

Referencia:Función tan() de CSS