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

给标签添加行内样式：