calc() CSS

Функция calc() может быть использована везде, где применимы <length>, <frequency>, <angle>, <time>, <number>, или <integer>.

С помощью calc() вы можете проводить вычисления, чтобы задавать значения CSS свойств.

Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

Синтаксис

/* property: calc(expression) */
width: calc(100% - 80px);

Значения

  • expression — математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:
  • + — Сложение
  • - — Вычитание
  • * — Умножение. По крайней мере хоть один из сомножителей должен быть <number>
  • / — Деление. Делитель должен быть <number>

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

Внимание: Деление на ноль выдаст ошибку при парсинге HTML.

Замечание: Операторы + и - всегда должны быть отеделены пробелом. Выражение calc(50% -8px) распарсится как величина в процентах и следующей за ним отрицательное число в пикселях, хотя на самом деле имелось ввиду вычитание 8 пикселей из 50 процентов.

Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

Примеры

Позиционирование объекта в окне с помощью отступа

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px.

.banner {
  position: absolute;
  left: 5%;                 /* для браузеров не поддерживающих calc() */
  left: calc(40px);     
  width: 90%;               /* для браузеров не поддерживающих calc() */
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

<div class="banner">This is a banner!</div>