微信小程序--calc无效问题

• 问题
  在使用scroll-view时，用height: calc(100% - 180rpx);设置高度无效
• 百度
  在网上查了一下, 基本都是一个办法, 就是给scroll-view加一个父元素, 给父元素设置高度. 但是根据官方文档, scroll-view必须设置height属性才能正确滚动
• 分析
  其实问题出在了100%, 如果设置为100%, 就会默认用滚动组件中的所有元素把当前页面撑开, 比如每个元素高100rpx, 共有10个, 屏幕高度800rpx, 那么100%=1000rpx, 所以前面的calc计算以后仍然高于屏幕的800rpx, 就好像height设置calc无效一样
• 解决
  解决办法就是把100%换成100vh, 因为100%取的是整个元素的高度, 100vh是整个平面的高度, 默认情况下没有元素撑开高度的时候, 二者是相等的, 但是像滚动组件这种用100%就不合适, 而100vh不受元素高度影响
• 注意
  还有人calc没有生效, 是因为没有注意书写要求, calc函数要求:
  1. 运算符号前后必须有空格
  2. 函数的括号内部前后不能有空格, 即calc(stat)的括号内和stat之间不能由空格