CSS \`height: calc(100vh);\` VS\`height: 100vh;\`

Question

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

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

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

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

原文由 Adriano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 jameslittle230 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

VH

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

示例： height: 50vh;

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

中飞公司

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

例子：

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

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

原文由 Anukul Limpanasil 发布，翻译遵循 CC BY-SA 4.0 许可协议