iphone自带浏览器高度填满有纵向滚动条的解决方案

问题描述：设置高度100vh，在iphone自带浏览器中会出现纵向滚动条

解决方案1：使用position:absolute

#app {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

解决方案2：采用 css3属性-webkit-fill-available

- 1、第一步
#app {
  // 解决safirew浏览器高度填满有滚动条的问题
  height: -webkit-fill-available;
  height: 100dvh; // ios15.4之后处理高度自适应问题
  min-height: 100vh;
  min-height: -webkit-fill-available;
  box-sizing: border-box;
  // height: calc(100vh + constant(safe-area-inset-bottom)); //兼容IOS<11.2
  // height: calc(100vh + env(safe-area-inset-bottom)); //兼容 IOS>11.2
  // padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
  // padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
}

- 2、第二步：增加meta标签
<meta content="viewport-fit=cover" name="viewport">