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

  }

如果頁面內容不限制高度，則正常添加如上適配就行。如果限制一屏高度,如下圖：

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; // 屬性規定是否對內容的上/下邊緣進行裁剪 - 如果溢出元素內容區域的話，則提供滾動機制

  }

}
</style>

關于height:100%和height:100vh的區別

vh就是當前屏幕可見高度的1%，也就是說

height:100vh == height:100%;

但是當元素沒有內容時候，設置height:100%，該元素不會被撐開，此時高度為0，

但是設置height:100vh，該元素會被撐開屏幕高度一致。