basic.less(全局樣式)中：
page {
// height: 100%; // 不要加 height: 100%;
padding-bottom: constant(safe-area-inset-bottom); // 適配全面屏
padding-bottom: env(safe-area-inset-bottom);
}
// 如果頁面底部有固定button，高度為120rpx，加此下代碼
.has-button-padding {
padding-bottom: 120rpx !important;
}
頁面底部button組件bottomButton：
<view class="bottomButton"></view>
.bottomButton {
position: fixed;
bottom: 0;
width: 100%;
height: 120rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
如果頁面內(nèi)容不限制高度，則正常添加如上適配就行。如果限制一屏高度,如下圖：
CE9CEB8E-B626-4A9A-B7C0-DBDA5B7E5313.png
<div class="crm-other-container has-button-padding">
<van-tree-select items="{{ infoItems }}" main-active-index="{{ mainActiveIndex }}" active-id="{{ activeId }}" bind:clicknav="onClickNav" bind:clickitem="onClickItem" />
<bottomButton btnArr="{{ btnArr }}" />
<van-toast id="van-toast" />
</div>
<style lang="less">
.crm-other-container {
box-sizing: border-box;
height: 100%;
.van-tree-select {
height: calc(100vh - 120rpx - constant(safe-area-inset-bottom)) !important;
height: calc(100vh - 120rpx - env(safe-area-inset-bottom)) !important;
overflow-y: auto; // 屬性規(guī)定是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪 - 如果溢出元素內(nèi)容區(qū)域的話，則提供滾動(dòng)機(jī)制
}
}
</style>
關(guān)于height:100%和height:100vh的區(qū)別
vh就是當(dāng)前屏幕可見高度的1%，也就是說
height:100vh == height:100%;
但是當(dāng)元素沒有內(nèi)容時(shí)候，設(shè)置height:100%，該元素不會(huì)被撐開，此時(shí)高度為0，
但是設(shè)置height:100vh，該元素會(huì)被撐開屏幕高度一致。
