直接上代码
[CSS] 纯文本查看 复制代码 // 给最外层的盒子类写上如下 padding-bottom 的内容
.app-container {
width: 100vw;
box-sizing: border-box;
/* 利用新增的 env() 和 constant() 特性,自动计算底部安全距离 */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* 可计算 */
padding-bottom: calc(124rpx + env(safe-area-inset-bottom));
}
很方便,无需再去手写相关方法去动态计算
效果如下

使用padding-bottom自动撑开底部高度,实测安卓苹果皆可用,老式安卓底部带返回按钮导航栏的也正常
|