Резиновая верстка в css3 с использованием calc

CSS Calc — достаточно новая и еще очень редко используемая функция. Она позволяет выполнять простые арифметические операции непосредственно при описании стилей с использованием всех видов единиц измерения. Это очень удобно для вычисления размеров, положения, преобразования и сглаживания цветных элементов.

Синтаксис CSS calc

property: calc(expression);

Выражение представляет собой комбинацию значений и символов математических операций:

+ сложение

width: calc(15px + 15px);

— вычитание

padding: calc(20% - 15px);

* умножение

height: calc(30%*3);

/ деление

width: calc(100%/5);

Знаки сложения и вычитания должны содержать дополнительные пробелы с обеих сторон.
Все расчеты выполняются в соответствии со стандартными правилами порядка выполнения действий.
Для понятия синтаксиса рассмотрим следующие примеры:

width: calc(60% / 3);
width: calc(45% - 3em);
width: calc(100% / 5 - 2 * 2em - 3 * 5px);
margin: calc(1rem - 3px) calc(1rem - 3px);
background-position: calc(60% + 15px) calc(60% + 15px), 40% 40%;

Поддержка браузеров

В настоящее время calc поддерживается всеми настольными браузерами:

• IE9
• Opera (не поддерживается до версии 15).
• Firefox до version 16 поддерживает значение -moz-calc.
• Chrome до version 26 поддерживает значение -webkit-calc.
• Safari до version 6 поддерживает значение -webkit-calc.

Примеры кросбраузерных стилей с использованием префиксов:

width: -webkit-calc(45% - 120px);
width: -moz-calc(45% - 120px);
width: calc(45% - 120px);

CSS calc при создании макета

Создание макета для любых веб-приложений всегда начинается с установки размеров и позиций всех основных элементов. В тоже время, в зависимости от целей проекта и конструктивных особенностей различных комбинаций единиц могут использоваться (%, px, em, rem).

Calc позволяет решить проблему резиновой верстки:

1. объединением фиксированных  и резиновых блоков;
2. взаимным расположением фиксированных и/или резиновых элементов;
3. установки размеров без использования длинных бесконечных дробей (например, 14.857142857%) и другое.

На сегодняшний день самая типичная задача содержит следующие требования:

• часть элементов должны быть эластичными, т.е. указаны в процентах от ширины или высоты (обычно главный контент);
•  часть элементов должны быть установлены с фиксированной шириной (в зависимости от требований они могут быть добавлены в блоках, меню, баннерах, боковых панелях и т.д.);
• расстояние между блоками в фиксированных единицах fixed (px, em, rem) или же относительных relative (%).

Рассмотрим пример, имеется макет с 3 — мя колонками, правая и левая колонки имеют фиксированную ширину 200px, центральная занимает оставшееся место. Между колонками должно быть фиксированное расстояние не более 15px.
Без calc пример ниже требует дополнительных контейнеров — containers, дополнительных margins, paddings, floats и другое. С использованием calc в CSS получается следующее:

HTML code:

CSS style:

.center-column {
  width: -webkit-calc(100% - 200px - 200px - 15px - 15px);
  width: -moz-calc(100% - 200px - 200px - 15px - 15px);
  width: calc(100% - 200px - 200px - 15px - 15px);
}

.left-column {
  width: 200px;
  margin-right: 15px;
}

.right-column {
  width: 200px;
  margin-left: 15px;
}

.center-column, .left-column, .right-column {
  float: left;
}

Необходимо просто попробовать изменить окно браузера и посмотреть что произойдет.

Аккуратная запись бесконечных дробей с использованием calc в CSS

Рассмотрим пример, где CSS должен использовать псевдобесконечное дробное число.
Предположим, что имеется 7 столбцов (блоков), которые должны быть расположены в один ряд таким образом, чтобы они в конечном счете занимали всю ширину экрана.
Ширина каждого блока при этом 100%/7=14,2857142857%. CSS стиль при этом будет выглядеть следующим образом:

.column {
 width: 14.2857142857%; 
}

С использованием calc в CSS этот же пример можно записать в чистой и ясной форме:

.column {   
width: calc(100% / 7); 
}