Recomendação de curso:

Função calc() do CSS

Definição e uso do CSS calc() A função calcula e usa o resultado como valor do atributo.

Exemplo

Usar calc() Calcular a largura do elemento <div>:

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

Experimente você mesmo

Sintaxe do CSS

calc(expression)
Valor Descrição
expression

Obrigatório. Uma expressão matemática cujo resultado será usado como valor.

Pode usar os seguintes operadores: +, -, *, /.

Detalhes técnicos

Versão: CSS3

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
26 9 16 7 15

Páginas relacionadas

Referência:Função acos() do CSS

Referência:Função asin() do CSS

Referência:Função atan() do CSS

Referência:Função atan2() do CSS

Referência:Função cos() do CSS

Referência:Função exp() do CSS

Referência:Função hypot() do CSS

Referência:Função log() do CSS

Referência:Função mod() do CSS

Referência:Função pow() do CSS

Referência:Função sin() do CSS

Referência:Função sqrt() do CSS

Referência:Função tan() do CSS