ios 移动端样式求助

我这样想一个首屏展示一个页面，但是在 ios 浏览器下有滚动条。试过了 safari 和 chrome 都是这样的效果，有大佬解决过这样的问题吗？

<div className="box">
   <div className="header">头部</div>
   <div className="body">1</div>
   <div className="footer">底部</div>
</div>

.box {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #000;
  font-size: 16px;
  color: #dedede;
  .header {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid;
  }
  .body {
    flex: 1 1;
  }
  .footer {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid salmon;
  }
}