flex 实现上下固定中间可以滚动布局

.boxs {
  display: flex;
  height: 100%; 
  flex-direction: column
}

.footer,
.nave {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #999;
}
.intro {
  flex: 1;
  background-color:#fff;
  overflow: scroll;
}
page{
  height:100%;  
  background-color: #f1f1f1;
}


<view class="boxs">
  <view class="nave">顶部</view>
  <view class="intro">
    <view>吃点四u成都市次哦绝对是c</view>
    。。。。。。。。。。
    <view>4564651613</view>
    。。。。。。。。。。。
    <view>很刺激的是vcj发生的v</view>
  </view>
  <view class="footer">底部</view>
</view>