3.不同机型适配窗口高度问题

在使用scroll-view的过程中，遇到了在更换不同的展示机型后，自定义的导航栏随着滑动窗口一起滚动，或者有一块白色区域仿佛固定在视图底部一般

究其原因，因为我在给滑动窗口的高度赋值的时候，使用了vh做单位，但是自定义导航栏的高度却使用rpx做单位，导致一些机型这两块高度加起来或是大于100vh或是小于100vh

 

首先需要明了的是，小程序的页面在展示的时候，视图会根据机型的宽度做适应，规定屏幕宽为750rpx。而页面所展示的高度会随宽度变宽而减小

 

解决办法：在设计滚动窗口高度的时候，使用calc函数

用视图高度减去自定义导航栏的高度后，剩余高度给滚动窗口

.bottle{
  border:1px solid purple;
  display:block;
  height:calc(100vh - 196rpx);
}

使用时注意在表达式中运算符的前后必须要有空格才能生效