微信小程序--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之間不能由空格