博客

开篇老规矩：有用点赞+收藏+转发，欢迎留言讨论！

最近在写小程序项目，遇到calc计算无效：

.viewOne{
    height: calc(100vh - 30rpx);
}

.viewTwo{
    height: calc(100% - 30rpx);
}

在浏览器查看样式的时候，可见：

.viewOne{
    height: calc(70vh);
}

.viewTwo{
    height: calc(70%);
}

上面的明显就不对，下面展示有效的写法：

.viewOne{
    height: calc(~"100vh - 30rpx");
}

.viewTwo{
    height: calc(~"100% - 30rpx");
}

在浏览器查看页面相关样式属性：

.viewOne{
    height: calc(100vh - 30rpx);
}

.viewTwo{
    height: calc(100% - 30rpx);
}

完美有效：

最后小结一下calc的使用：

1. 运算符左右两边要有空格；
2. 数字和单位之间不能有空格；
3. 括号与减数，被减数之间不能有空格；
4. 以上无效记得加上英文~符和双引号。