CSS `высота: calc (100vh);` Vs `высота: 100vh;`

Question

Я работаю над проектом, в котором бывший разработчик использовал:

.main-sidebar {
    height: calc(100vh);
}

У меня больше нет возможности связаться с ним / ней, и я хотел бы понять, в чем разница (если есть)между двумя методами.

(Это правильное место, чтобы задать этот вопрос?)

Answer 1

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

. Возможно, вы захотите сослаться на это https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc

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

Answer 2

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

Теперь в вашем случае,оба одинаковы, так как вы не использовали никаких расчетов.Так что вы можете использовать высоту: 100vh

Answer 3

Обычный вариант использования заключается в том, что сначала он вычитал заголовок или любой другой элемент.рассчитать (100vh - 80px).

Answer 4

VH
height: 100vh; означает, что высота этого элемента равна 100% высоты области просмотра.

пример: height: 50vh;
Если высота вашего экрана1000px, высота вашего элемента будет равна 500px (50% от 1000px).

CALC
height: calc(100% - 100px); рассчитает размер элемента, используя значениеelement.

пример:
height: calc(100% - 100px); Если высота вашего экрана равна 1000px, высота вашего элемента будет равна 900px (100% от 1000px и минус 100px).

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

Answer 5

Нет никакой разницы, так как всякий раз, когда вычисляется выражение calc(100vh), оно всегда заканчивается 100vh.