Справочник CSS

calc()

Функция calc() позволяет указать в качестве значения свойства несложное арифметическое выражение с использованием следующих операторов:

  • + — сложение (width: calc(20px + 20px););
  • -  — вычитание (width: calc(100% — 30px););
  • * — умножение (width: calc(20% * 2););
  • / — деление (width: calc(100% / 3);).

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

Операндами могут быть любые числовые значения. Функция calc() позволяет смешивать единицы измерения, например, % и px.

Замечание: Делить на ноль нельзя.
Замечание: Операторы + и — должны быть отделены пробелами, чтобы не было путаницы с отрицательными и положительными значениями. Отделять пробелами операторы * и / необязательно, но для единообразия рекомендуется.

Примеры использования

Особенно полезна функция calc() там, где необходимо комбинировать абсолютные и относительные единицы измерения.

Вертикальное центрирование

Функция calc() позволяет центрировать по вертикали элемент известной высоты. 50vh означает половину высоты области просмотра, для центрирования элемента необходимо из этого значения вычесть половину высоты элемента. Например:


.box {
    height: 100px;
    margin-top: calc(50vh - 50px);
}

Фиксированные и резиновые элементы

Часто необходимо расположить в строке фиксированные и резиновые элементы, при этом они должны занимать все 100% ширины. Сделать это с помощью функции calc() можно так:


/*
 * Обратите внимание, что в функции calc() учтены 
 * и ширина фиксированного элемента
 * и значение отступа (40px + 10px)
 */
.box-1 {
    float: left;
    height: 50px;
    width: calc(100% - 50px);
}

.box-2 {
    float: left;
    width: 40px;
    height: 50px;
    margin-left: 10px;
}

Full-width элементы внутри блока с отбивкой

Иногда может понадобиться расположить элемент на всю ширину внутри элемента с отбивкой. Для этого можно увеличить 100%-ную ширину внутреннего элемента на две величины отбивки и добавить отрицательный отступ.


.box {
    width: calc(100% + 40px);
    margin-left: -20px;
}
Функцию calc() не стоит использовать там, где можно заранее рассчитать значение, чтобы не выполнять ненужных вычислений:

.box {
    width: calc(500px / 3);
}

Поддержка браузерами

Chrome Opera Firefox IE Edge Safari iOS Safari Opera Mini Android Browser Chrome for Android
Yes Yes Yes Yes Yes Yes Yes No Yes Yes