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

Question

我正在从事前开发人员使用的项目：

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

我再也无法联系他/她，我想了解这两种方法之间的区别（如果有的话）。

（这是问这个问题的正确地方吗？）

Answer 1

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

例如： height: 50vh;
如果您的屏幕高度为 1000 像素，则您的元素高度将等于 500 像素（1000 像素的 50%）。

CALC
height: calc(100% - 100px);将使用元素的值来计算元素的大小。

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

*我认为你的前开发者calc()如果他/她不想计算价值就不需要使用。

Answer 2

没有区别，因为无论何时calc(100vh)计算表达式，它总是以100vh.

Answer 3

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

示例高度：calc(100vh - 60px);

这里视口高度将减少 60px。

注意：如果操作符不起作用，请记住在操作符之前和操作符之后使用空格。

Answer 4

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

你可能想参考这个 路径

（前开发人员使用它的原因可能是他通常在任何地方都使用它，之后添加计算会更容易）