Функция calc

Функцията calc позволява изчисления на стойности на CSS свойства. Функцията приема като параметър математически израз, чийто резултат от изчислението може да се използва като стойност на CSS свойство. Изразът може да включва оператори +, -, *, /.

Синтаксис

cssселектор {
  свойство: calc(израз);
}

Пример

Нека направим така, че ширината на блока да бъде равна на 100% от ширината на родителя, минус 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Вижте също