scroll-view如何自适应页面剩余高度

在uni-app使用中，有如下场景，页面有三个组件，top-bar顶部标题栏高度指定，bottom-bar底部功能菜单栏高度指定，scroll-view区域是一个scroll-view滚动区域，浏览聊天内容。要求scroll-view在这两个组件之间正常显示。

查阅官方文档，文档要求使用竖向滚动时，需要给 <scroll-view> 一个固定高度，但这个高度无法直接确定； 

首先想到的方法是通过计算得出scroll-view的高度，使用100vh即视口高度，减去上下两个组件和手机状态栏的高度，得到剩余的高度即scroll-view的高度。

onLoad(options){
	uni.getSystemInfo({
		success: (res) => {
			// 获取手机状态栏高度
			this.statusBarHeight = res.statusBarHeight;
			this.scrollviewHeight = `calc(100vh - 98rpx - 110rpx - ${this.statusBarHeight}px)`;
		}
	});
}

给标签添加行内样式：

<scroll-view class="chat-main" 
		 scroll-y="true" 
		 :scroll-into-view="scrollToView"
		 :scroll-with-animation="needScrollAnimation"
		 @scrolltoupper="debounce"
		 :style="{height:scrollviewHeight}">
</scroll-view>

但这种方法需要使用js计算不太简便，可以使用flex布局，将主轴设为y轴，随后指定另外两个组件的高度，scroll-view区域使用flex:1高度自适应即可。需要注意的是除了自适应区域以外的元素一定要指定高度，如果没有确定的高度可以指定相对高度。还有就是page是小程序默认包裹在最外层的标签，也要指定高度height:100%

<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>

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;
}

参考：微信小程序中scroll-view高度自适应问题怎么办解决 - 开发技术 - 亿速云 (yisu.com)