css解决苹果手机底部凹槽问题

问题：

image.png

image.png

<div class="footer-block">
  <div class="ios-bottom"><div>
</div>

      .footer-block {
        width: 100vw;
        height: 100rpx;
        position: fixed;
        left: 0;
        // bottom: 0;
        bottom: 0rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        z-index: 199;
        overflow: inherit;
    }
        //底部设置个底块，填充空白
      .ios-bottom{
        width: 100vw;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
        position: fixed;
        bottom: 0rpx;
        z-index: 199;
        background-color: $theme-color;
        box-sizing: inherit;
        border-top: 1rpx solid #efefef;
    }