Функция calc()

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

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