微信小程序 页面除去头部和底部，中间高度铺满剩余部分的解决方案

做这么一个界面，让中间紫色和橙色部分的内容铺满在中间位置，并且让橙色部分位置固定不动，紫色部分内容超出时滚动，如图：

 首先如何做到呢？

我使用了定位position：fiexed;让它撑满（关键代码），

position: fixed;top: {
  {topHeight + 30}}rpx;left: 25rpx;right: 25rpx;bottom:30rpx;

 

然后通过计算出紫色部分的高度 = 紫橙外部view的高度 - 橙色部分的高度，当内容过长时滚动（滚动需要设置一个高度），并完全显示内容。

这么做的目地是如果紫色部分直接设置高度100%时，它里面的内容不会完全显示，因为紫色的高度是根据包含它的外部view的高度设置100%的，而外部的view里面还有一个橙色view的高度，会把紫色往下挤，所以会显示不完全，只能通过计算高度来显示全部的信息。

代码：

首先

app.json,在onLaunch里面设置我的头部导航的高度（我自定义的导航栏）

let that = this;
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        that.globalData.statusBarHeight = res.statusBarHeight;//获取状态栏的高度
        //设置导航栏高度，判断不同系统，设置不同高度
        if (res.platform == "ios") {
          that.globalData.navHeight = 44;
        }else if (res.platform == "android") {
          that.globalData.navHeight = 48;
        } else {
          that.globalData.navHeight = 44;
        }
      },
      fail(err) {
        console.log(err);
      }
    });

接下来，

main.wxml  ，我这里是自定义的头部导航组件，就不列出来了，如果不是自定义的，头部导航的高度还有状态栏怎么获取可以百度，我下面的js代码有获取节点高度的，剩下的靠你自己了，都有很简单（不是自定义的可以忽略我上面的代码，如果是系统自带的导航，获取高度去百