Функция CSS calc()

Определение и использование

Функция CSS calc() Функция выполняет вычисление и использует результат в качестве значения атрибута.

Пример

Использование calc() Рассчитать ширину элемента <div>:

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

Попробуйте сами

Грамматика CSS

calc(expression)
Значение Описание
expression

Обязателен. Математическое выражение, результат которого используется в качестве значения.

Можно использовать следующие операторы: +, -, *, /.

Технические детали

Версия: CSS3

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
26 9 16 7 15

Соответствующие страницы

См. также:Функция CSS acos()

См. также:Функция CSS asin()

См. также:Функция CSS atan()

См. также:Функция CSS atan2()

См. также:Функция CSS cos()

См. также:Функция CSS exp()

См. также:Функция CSS hypot()

См. также:Функция CSS log()

См. также:Функция CSS mod()

См. также:Функция CSS pow()

См. также:Функция CSS sin()

См. также:Функция CSS sqrt()

См. также:Функция CSS tan()