两端固定高度，中间自适应，中间部分可以滚动

 

中间部分高度自适应，可以滚动：使用css

<view class="box">
　　<top-bar class="box-head"></top-bar>
　　<scroll-view class="box-scroll"></scroll-view>
　　<bottom-bar class="box-bottom"></bottom-bar>
</view>

使用flex布局，将主轴设为y轴，随后指定另外两个组件的高度，scroll-view区域使用flex:1高度自适应即可

page{
 height:100%;
}
.box {
 display: flex;
 flex-direction:column;
 height:100vh;     /*高度必须指定 或者写成100%*/
 overflow:hidden;
}
.box-head {
 flex-shrink: 0;
 height: 55px;
}
.box-scroll {
 flex: 1; /* */
 overflow: scroll;   /*必须写这一条*/
 height: 1px;
}
.box-bottom {
 height:49px;
}