完美解决小程序中css样式中calc计算无效的问题

2023-11-29 约 241 字预计阅读 1 分钟

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

最近在写小程序项目，遇到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的使用：

目录