CSS функция calc()

Определение и применение

CSS функция calc() css3 позволяет выполнять математические расчеты для определения значений свойств CSS.

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

Функция	Chrome	Firefox	Opera	Safari	IExplorer	Edge
calc()	26.0 19.0 -webkit-	16.0 4.0 -moz-	15.0	7.0 6.0 -webkit-	9.0	12.0

CSS синтаксис:

calc(математическое выражение);
/* в качестве операндов могут выступать значения length | frequency | angle | time | number | integer */

Значения функции

Значение	Описание
expression (выражение)	Математическое выражение. Результат этого выражения будет использоваться в качестве конечного значения. Является обязательным значением. Допускается использовать следующие операторы: + (сложение). Оператор должен разделяться пробелами с обеих сторон. - (вычитание). Оператор должен разделяться пробелами с обеих сторон. * (умножение). Оператор не требует пробела между значениями, но рекомендуется их добавлять. / (деление). Оператор не требует пробела между значениями, но рекомендуется их добавлять. Деление на ноль вызовет ошибку.

Значение

Описание

expression
(выражение)

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

Допускается использовать следующие операторы:

+ (сложение). Оператор должен разделяться пробелами с обеих сторон.
- (вычитание). Оператор должен разделяться пробелами с обеих сторон.
* (умножение). Оператор не требует пробела между значениями, но рекомендуется их добавлять.
/ (деление). Оператор не требует пробела между значениями, но рекомендуется их добавлять. Деление на ноль вызовет ошибку.

Версия CSS

CSS 3

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования функции calc()</title>
<style>
html, body {
height: calc(100% - 8px);
background: #999;
}
.first {
width: 30%;
float: left;
height: 100%;
margin-right: 1em;
background: forestgreen;
}
.second {
width: calc(70% - 1em);
float: right;
height: 100%;
color: white;
background: green;
}
</style>
</head>
<body>
	<div class = "first"></div>
	<div class = "second"></div>
</body>
</html>

В данном примере мы:

рассчитали высоту элементов <html> и <body> используя функцию calc(), вычитая 8px из 100%. 8px мы взяли по той причине, что по умолчанию у браузера Chrome, к примеру, внешние отсупы для элемента <body> со всех сторон равны 8px и мы рассчитываем высоту с учетом того, что мы не меняем, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов (box-sizing). Если бы мы не вычли эти 8px, то мы получили бы полосу прокрутки.
Для первого блока мы установили внешние отступы с правой стороны (margin-right) равные 1em, ширину блока установили равную 30%, а высоту установили 100% от родительского элемента. Кроме того элемент плавающий и смещается по левому краю (float: left;).
Для второго блока мы установили ширину блока равную 70% пикселей минус 1em, а высоту установили 100% от родительского элемента. Из ширины мы вычли 1em по той причине, что мы для первого блока установили аналогичное значение для внешнего отступа справа (margin-right). Кроме того элемент плавающий и смещается по правому краю (float: right;).

Вы можете заметить, что проще в этом примере просто изменить применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов - box-sizing css3 со значением border-box и не проводить рассчетов. Да это так, но если у вас тысячи страниц сверстаны под модель принятую по умолчанию, то изменяя её это может привести к серьезным проблемам.

Результат примера:

Рассмотрим пример в котором мы создадим сеточную систему с использованием функции calc().

<!DOCTYPE html>
<html>
<head>
<title>Пример использования функции attr()</title>
<style>
div[class^='column'] {
float: left;
height: calc(100vh - 8px);
}
.column-1-12 {
width: calc(100% / 12);
background: red;
}
.column-2-12 {
width: calc(100% / 12 * 2);
background: green;
}
.column-3-12 {
width: calc(100% / 12 * 3);
background: yellow;
}
.column-4-12 {
width: calc(100% / 12 * 4);
}
.column-5-12 {
width: calc(100% / 12 * 5);
background: blue;
}
.column-6-12 {
width: calc(100% / 12 * 6);
}
.column-7-12 {
width: calc(100% / 12 * 7);
}
.column-8-12 {
width: calc(100% / 12 * 8);
}
.column-9-12 {
width: calc(100% / 12 * 9);
}
.column-10-12 {
width: calc(100% / 12 * 10);
}
.column-11-12 {
width: calc(100% / 12 * 11);
}
.column-12-12 {
width: 100%;
}
</style>
</head>
<body>
	<div class = "column-1-12"></div>
	<div class = "column-2-12"></div>
	<div class = "column-5-12"></div>
	<div class = "column-3-12"></div>
	<div class = "column-1-12"></div>
</body>
</html>

В данном примере мы:

создали 12 классов для использования двенадцатиколоночной сеточной системы. Для расчета сколько занимает каждая колонка использовалась функция calc().
Например, для расчета сколько занимает пять колонок необходимо 100% ширины разделить на общее количество колонок - 12 и умножить на количество использованых нами - 5.
В примере используются пять блоков, которые занимают 1,2,5,3 и 1 колонку, что в сумме дает 12 колонок, которые занимают 100% ширины окна.
Кроме того для всех элементов <div>, которые мы выбрали используя селектор атрибута, значение, которого начинается с определённых символов ('column') мы установили и расчитали с помощью функции calc() высоту равную 100% от высоты области просмотра (vh) минус 8 пикселей. Почему именно 8 пикселей вы знаете из предыдущего примера.

Результат примера:

Сеточная система с использованием функции calc().

CSS функции