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);
}
如果页面内容不限制高度,则正常添加如上适配就行。如果限制一屏高度,如下图:
<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,该元素会被撑开屏幕高度一致。