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

Question

我正在做一个元素，前开发人员使用了:

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

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

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

Answer 1

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

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

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

例子:
高度:计算(100% - 100px)； 如果您的屏幕高度为 1000 像素，则您的元素高度将等于 900 像素(1000 像素的 100% 减去 100 像素)。

*我认为如果您的前开发人员不想计算值，则他/她不需要使用 calc()。