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ī)定是否對內(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ì)被撐開屏幕高度一致。