Css calc 100vh 50px

calc ( )

Настоящая математика внутри CSS! Что может быть безумнее удобнее?

Время чтения: меньше 5 мин

Обновлено 13 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Классная функция, позволяющая производить математические вычисления прямо в CSS. Раньше, до появления calc ( ) , приходилось страдать и вычислять размеры примерно.

Пример

Скопировать ссылку «Пример» Скопировано

Частая ситуация: в вёрстке три колонки, ширина каждой из которых должна быть ровно третью от 100%. 100% / 3 = 33.3333333333. %. Раньше мы допускали неточность и указывали ширину как 33%. Теперь можно использовать calc ( ) и пусть браузер сам считает.

При отрисовке страницы браузер сам высчитает и подставит значение:

 .selector  width: calc(100% / 3);> .selector  width: calc(100% / 3); >    Скопировать Скопировано Не удалось скопировать   

Но лучше не перегружать браузер расчётами. На каждую операцию он тратит некую долю секунды и часть оперативной памяти. Если расчётов будет много, то это потенциально повлияет на скорость загрузки страницы. Используйте calc ( ) с умом.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В круглых скобках мы можем писать любые математические операции с любыми единицами измерения, доступными в вебе (%, px, rem, em, vw, vh, vmin и т.д.). Доступны четыре стандартных операнда:

Операторы сложения и вычитания обязательно с двух сторон должны отбиваться пробелом. Иначе браузер воспримет их как часть числа. Хоть операторы деления и умножения не требуют такой строгости к себе, но принято и их тоже отбивать пробелами для удобства чтения.

 .selector  width: calc(100% - 2rem);> .selector  width: calc(100% - 2rem); >    Скопировать Скопировано Не удалось скопировать   

 .selector  width: calc(100% -2rem);> .selector  width: calc(100% -2rem); >    Скопировать Скопировано Не удалось скопировать   

Внутри скобок может быть больше одного вычисления, можно группировать операции при помощи скобок. Всё как в настоящем языке программирования 😺 Но не стоит увлекаться: чем короче вычисление, тем проще потом его прочитать и понять что там вообще происходит.

Для каких свойств можно указать calc ( ) в качестве значения? Для любых, значением которых должна быть цифра! Причём если свойство предполагает составное значение, то можно указать функцию как часть этого значения:

 .selector  margin: calc(5vh / 4) 20px; transition: transform calc(0.5s + 120ms);> .selector  margin: calc(5vh / 4) 20px; transition: transform calc(0.5s + 120ms); >    Скопировать Скопировано Не удалось скопировать   

Внутри круглых скобок можно складывать только числовые значения. Нельзя сложить число со строкой, хотя в полноценных языках программирования, типа JavaScript, такой трюк с лёгкостью бы удался.

Ещё одно неудачное место для этой функции — медиавыражения. Вот такая запись считается не валидной:

 @media (min-width: calc(465px + 1vw))  . ;> @media (min-width: calc(465px + 1vw))  . ; >    Скопировать Скопировано Не удалось скопировать   

Хотя бы у одной из цифр внутри скобок нужно указать единицу измерения, иначе браузер не сможет понять, от чего же вести вычисление.

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Очень удобно (и часто приходится) использовать, когда из одной величины в относительных единицах надо вычесть другую величину в абсолютных единицах. Самостоятельно это никак не посчитать, а браузеру раз плюнуть. Например, каким будет результат такого вычисления?

 .selector  height: calc(100vh - 34px);> .selector  height: calc(100vh - 34px); >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Возьмём тот же пример с тремя колонками из начала статьи. Пусть у каждой из колонок будет внешний отступ по 40 px с каждой из сторон. Если зададим свойства в лоб, то ничего не выйдет, последний блок падает на новую строку.

    
Газеты   
Заводы   
Пароходы   div class="parent"> div class="child"> h2>Газетыh2> div> div class="child"> h2>Заводыh2> div> div class="child"> h2>Пароходыh2> div> div>    Скопировать Скопировано Не удалось скопировать   

 .child  display: inline-block; width: 33.3%; margin-left: 40px; margin-right: 40px;> .child  display: inline-block; width: 33.3%; margin-left: 40px; margin-right: 40px; >    Скопировать Скопировано Не удалось скопировать   

Можно использовать флексбокс. Избежим падения, но получим проблему сужения блоков, чтобы уместиться в ряд. Как всего этого избежать? Высчитывать размер блоков с учётом этих боковых отступов!

 .child  display: inline-block; width: calc(33.3% - 80px); margin-left: 40px; margin-right: 40px;> .child  display: inline-block; width: calc(33.3% - 80px); margin-left: 40px; margin-right: 40px; >    Скопировать Скопировано Не удалось скопировать   

Источник

Функция calc()

calc() — это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы , (en-US), , , , или .

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

Синтаксис

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

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

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

Примечание: Деление на ноль выдаст ошибку при парсинге HTML.

Примечание: Операторы + и — всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% — 8px) — правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях. Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

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

Примеры

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

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); > 

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

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Полное руководство по calc() в CSS

Единственное место, где вы можете использовать функцию calc() — это значения. Посмотрите эти примеры, в которых мы устанавливаем значение для ряда различных свойств.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Она также может использоваться только для части свойства, например:

Она может даже быть частью другой функции, которая является частью свойства! Например, здесь calc() используется внутри переходов цветового градиента.

calc() для длин и других числовых вещей

Обратите внимание, что все приведенные выше примеры основаны на числах. Мы дойдем до некоторых предостережений о том, как можно использовать числа (потому что иногда вам не нужны единицы измерения), но это для математики чисел, а не для строк или чего-то в этом роде.

Существует много единиц измерения длины CSS, и все они могут быть использованы с calc(): px, %, em, rem, in, mm, cm, pt, pc, ex, ch, vh, vw, vmin, vmax.

Также допустимы числа без единиц измерения, например, line-height: calc(1.2 * 1.2); как и углы transform: rotate(calc(10deg * 5));. Вы также можете не выполнять какое-либо вычисления, и это все еще действительно:

Не для медиа-запросов

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

Было бы здорово получить это когда-нибудь, потому что вы могли бы выполнять взаимоисключающие медиа-запросы довольно логичным способом (как выше).

Различные единицы измерения

Это, пожалуй, самая полезная особенность calc()! Почти во всех приведенных выше примерах уже использовалось это, но просто чтобы подчеркнуть еще раз, мы можем смешивать разные единицы:

Это значит: как ширина элемента, минус 20 пикселей.

Не существует никакого способа заранее рассчитать, каково будет значение в пикселях при использовании гибких единиц. Другими словами, вы не можете предварительно обработать calc(), как в Sass, как попытку завершить полизаполнение. Но это и не нужно, так как браузеры поддерживают это нормально. Но дело в том, что это должно быть сделано в браузере (во время выполнения), когда вы смешиваете таким образом единицы измерения, что является очень полезным.

Вот еще несколько примеров смешивания единиц измерения:

Это, вероятно, может быть предварительно обработано, поскольку здесь смешиваются единицы, которые не относятся ни к чему, что определяется во время выполнения.

Сравнение с математикой препроцессора

Мы только что рассмотрели, что вы не можете предварительно обработать самые полезные вещи с calc(). Но есть несколько дублирований. Например, в Sass встроена математика, поэтому вы можете делать такие вещи, как:

Даже математика с единицами измерения там работает, складывая значения одинаковых единиц вместе или умножая на числа без единиц измерения. Но вы не можете смешивать единицы измерения, и здесь ограничения подобны calc() (например, умножение и деление должно выполняться с числами без единиц измерения).

Отображение математики

Даже если вы не используете функцию, которая возможна только с помощью calc(), ее можно использовать, чтобы «показать свою работу» в CSS. Например, скажем, вам нужно точно рассчитать 1/7 ширины элемента…

Это может произойти в каком-то самостоятельно созданном CSS API, например:

Математические операторы calc()

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

Недействительные значения делают недействительным все объявление.

Для деления (/) требуется, чтобы второе число было без единиц измерения.

Для умножения (*) требуется, чтобы одно из чисел было без единиц измерения.

Пробелы имеют значение. Ну, это относится к сложению и вычитанию.

Отрицательные числа допустимы (например, calc(5vw — -5px)), но это пример того, где пробел не только требуется, но и полезен.

Таб Аткинс говорит, что причина необходимости разделения + и — на самом заключается в проблемах с парсингом. Я не могу сказать, что полностью понимаю это, но, например, 2px-3px анализируется как число «2» и единица «px-3px», что никому не дает ничего хорошего, а у «+» есть другие проблемы, такие как «применение по числовому синтаксису». Я бы предположил, что пробел был бы связан с — синтаксисом пользовательских свойств, но нет!

Умножение и деление не требуют пробелов вокруг операторов. Но я думаю, что хороший общий совет — включить пробел для читаемости и мышечной памяти для других операторов. Пустое пространство вокруг не имеет значения. Вы даже можете вставить разрывы строк, если хотите:

Источник