CSS `height: calc (100vh);` Vs `height: 100vh;`
Я работаю над проектом, в котором бывший разработчик использовал:
.main-sidebar {
height: calc(100vh);
}
У меня больше нет возможности связаться с ним / ней, и я хотел бы понять, в чем разница (если есть) между этими двумя методами.
(Это подходящее место, чтобы задать этот вопрос?)
«(Это подходящее место, чтобы задать этот вопрос?)« Да, не волнуйтесь.
Ответы 5
Нет никакой разницы, поскольку всякий раз, когда вычисляется выражение calc(100vh), оно всегда оказывается 100vh.
Обычно он вычитал заголовок или любой другой элемент. calc (100vh - 80 пикселей).
Так вы говорите, что это был случай небрежности с удалением «- 80px», но не всего выражения calc ()?
Я согласен с @ "Dragomir Dan"
VHheight: 100vh; означает, что высота этого элемента равна 100% высоты области просмотра.
пример:
height: 50vh;
Если высота вашего экрана составляет 1000 пикселей, высота вашего элемента будет равна 500 пикселей (50% от 1000 пикселей).
РАСЧЕТheight: calc(100% - 100px); рассчитает размер элемента, используя значение элемента.
пример: height: calc(100% - 100px);
Если высота вашего экрана составляет 1000 пикселей, высота вашего элемента будет равна 900 пикселей (100% от 1000 пикселей и минус 100 пикселей).
* Я думаю, вашему бывшему разработчику не нужно было использовать calc(), если он / она не хотел рассчитывать стоимость.
В основном функция calc () позволяет использовать математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/) в качестве значений компонентов.
Теперь в вашем случае оба такие же, поскольку вы не использовали никаких вычислений. Таким образом, вы можете использовать высоту: 100vh
Функция CSS calc () позволяет выполнять вычисления при указании значений свойств CSS.
вы можете сослаться на это Дорожка
(Причина, по которой бывший разработчик использовал это, может заключаться в том, что он обычно использует его повсюду, и после этого было бы проще добавить вычисления)
Бьюсь об заклад, исходное значение было что-то вроде calc (100vh - 60px), а затем было удалено -60px
Я полностью согласен, Рассел. Скорее всего, так и должно было быть! :п
Возможный дубликат Ненужное использование calc () в примере MDN? (это не пример MDN, но он имеет такое же использование calc () только с одним значением)