关于less中使用calc计算出错
在某些情况下,为了更好的适配浏览器,我们会在css里面用上calc方法来准确的计算出元素的高度或宽带等属性。
例如:
需求:让页面内容刚好填充一屏幕高度。
页面内容分为2部分,已知头部导航栏为80px,此时我们只需要拿到屏幕高度 - 导航栏高度(80px),等到的像素就是内容区域的高度了,css我们这样写就可以了
.body { height: calc(100vh-80px) }
但如果你使用了less,你会发现,这里的高度并不如我们所愿,此时高度会奇怪的变成了 20vh。那是因为 less 中本来有 - 运算操作,我们 calc 中加上 ~'' 就可以
阻止被 less 编译(来自网友的解释)。
.body { height: calc(~"100vh - 80px") }
这样一来,我们就可以得到正确的结果了。