Short video mall system, how does scroll view adapt to the remaining height of the page

Short video mall system ,scroll-view How to adapt the remaining height of the page

onLoad(options){
    
	uni.getSystemInfo({
    
		success: (res) => {
    
			//  Get the height of the phone status bar 
			this.statusBarHeight = res.statusBarHeight;
			this.scrollviewHeight = `calc(100vh - 98rpx - 110rpx - ${
    this.statusBarHeight}px)`;
		}
	});
}

Add inline styles to labels ：

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

But this method requires the use of js The calculation is not simple , have access to flex Layout , Set the spindle to y Axis , Then specify the height of the other two components ,scroll-view Area use flex:1 Highly adaptive . It should be noted that elements other than the adaptive region must specify the height , If there is no definite height, you can specify the relative height . And that is page Is the label that the applet wraps on the outermost layer by default , Also specify the height 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;     /* Height must be specified   Or written 100%*/
 overflow:hidden;
}
.box-head {
    
 flex-shrink: 0;
 height: 55px;
}
.box-scroll {
    
 flex: 1;
 overflow: scroll;   /* This must be written */
 height: 1px;
}
.box-bottom {
    
 height:49px;
}

The above is the short video mall system ,scroll-view How to adapt the remaining height of the page , More content welcome to follow the article