Функция calc()

calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы <length>, <frequency>, <angle>, <time>, <number>, или <integer>.

Интерактивный пример

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
 --variable-width: 100px;
}
#example-element {
 border: 10px solid #000;
 padding: 10px;
}

Синтаксис

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

+

Сложение

-

Вычитание.

*

Умножение. По крайней мере хоть один из сомножителей должен быть <number>.

/

Деление. Делитель должен быть <number>.

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

Формальный синтаксис

calc(expression)

Примеры

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

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">Это баннер!</div>

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

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

Давайте посмотрим некоторый код CSS:

input {
 padding: 2px;
 display: block;
 width: 98%; /* для браузеров, не поддерживающих calc() */
 width: calc(100% - 1em);
}
#formbox {
 width: 130px; /* для браузеров, не поддерживающих calc() */
 width: calc(100% / 6);
 border: 1px solid black;
 padding: 4px;
}

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

<form>
 <div id="formbox">
 <label>Type something:</label>
 <input type="text" />
 </div>
</form>

Вложенный calc() с CSS переменными

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

.foo {
 --widthA: 100px;
 --widthB: calc(var(--widthA) / 2);
 --widthC: calc(var(--widthB) / 2);
 width: var(--widthC);
}

Спецификации

Совместимость с браузерами

Смотрите также

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog