如何用css适配iphoneX底部横条？！？

当我们在做app或者小程序的时候，如果是自适应屏幕高度，或者是用定位到底部按钮的时候，iphoneX底部的返回横条老是遮挡底部内容，如果巧妙的设计代码，使它能适配到iphoneX呢？

比如我写了一个底部按钮，漂浮在所有内容的上方，以下代码当在iphoneX的时候，就会被遮挡大约20px

// 正常手机使用的代码
 

/* 外层盒子 */
.hasbtn-padding{ 
  padding-bottom: 140rpx;
}

/* 底部定位的按钮 */
.bottom-button-box{
  width: 100%;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0 -5rpx 5rpx #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

解决办法：

使用css适配到有横条的手机，把外层盒子的padding-bottom修改的同时，需要把按钮的底部距离设置了，按钮加了个after是为了防止外层盒子滑动的时候，横条处的内容穿透。

/* 适配iphonex */

@supports (bottom: env(safe-area-inset-bottom)) {
    .hasbtn-padding{
        padding-bottom:calc(env(safe-area-inset-bottom) + 140rpx); // 这里是重点
    }
    .bottom-button-box{
        bottom:env(safe-area-inset-bottom); // 这里是重点
        &:after{
            content:'';
            height:env(safe-area-inset-bottom); // 这里是重点
            position: absolute;
            top:100%;
            left: 0;
            right:0;
            background-color: #fff;
        }
    }
}