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。
我正在做一个项目,前开发人员使用过:
.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。