CSS `height: calc(100vh);` VS`height: 100vh;`答案

【问题标题】：CSS `height: calc(100vh);` Vs `height: 100vh;`CSS `height: calc(100vh);` VS`height: 100vh;`
【发布时间】：2019-03-27 05:41:12
【问题描述】：

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

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

我已经没有办法联系到他/她了，我想了解一下这两种方法有什么区别（如果有的话）。

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

【问题讨论】：

Unnecessary use of calc() in MDN example? 的可能重复项（这不是 MDN 示例，但它具有与 calc() 相同的用法，只有一个值）
“（这是问这个问题的正确地方吗？）”是的，别担心。

【解决方案1】：

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

【讨论】：

【解决方案2】：

一个常见的用例是一开始他减去了标题或任何其他元素。计算（100vh - 80px）。

【讨论】：

【解决方案3】：

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()。

【讨论】：

【解决方案4】：

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

现在，在您的情况下，两者都相同，因为您没有使用任何计算。所以你可以使用 height: 100vh

【讨论】：

【解决方案5】：

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

你可能想参考这个 Path

（前开发者使用这个的原因可能是他习惯上在任何地方都使用它，之后添加计算会更容易）

【讨论】：

【解决方案6】：

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

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

这里的高度将比视口高度小 60px。

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

【讨论】：