- 问题
在使用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函数要求:- 运算符号前后必须有空格
- 函数的括号内部前后不能有空格, 即
calc(stat)
的括号内和stat之间不能由空格
微信小程序--calc无效问题
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.