CSS `height: calc(100vh);` 与 `height: 100vh;`

CSS `height: calc(100vh);` Vs `height: 100vh;`

我正在做一个项目,前开发人员使用过:

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

我已经联系不上him/her了,想了解一下这两种方式有什么区别(如果有的话)

(在这里问这个问题合适吗?)

没有区别,因为任何时候计算表达式 calc(100vh),它最终总是 100vh

一个常见的用例是,他首先减去 header 或任何其他元素。 计算(100vh - 80px)。

VH
height: 100vh; 表示此元素的高度等于视口高度的 100%。

示例: height: 50vh;
如果您的屏幕高度为 1000 像素,则您的元素高度将等于 500 像素(1000 像素的 50%)。

计算
height: calc(100% - 100px);会根据元素的值计算元素的大小

示例:
height: calc(100% - 100px); 如果您的屏幕高度为 1000 像素,则您的元素高度将等于 900 像素(1000 像素的 100% 减去 100 像素)。

*如果 he/she 不想计算值,我认为您以前的开发人员不需要使用 calc()

基本上 calc() 函数允许使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式作为分量值。

现在在你的情况下,两者都是一样的,因为你没有使用任何计算。所以你可以使用 height: 100vh

calc() CSS 函数可让您在指定 CSS 属性 值时执行计算

你可能想参考这个 Path

(以前的开发者用这个的原因可能是他习惯用它到处都是,以后添加计算会更容易)

calc()只是用来计算括号内的值。

身高示例:calc(100vh - 60px);

此处的视口高度将减少 60px。

注意:如果运算符不起作用,请记住在运算符之前和之后使用 space。