ios 移动端样式求助

[CrispyNoodles]

我这样想一个首屏展示一个页面，但是在 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;
  }
}

[wsli10]

如果是要隐藏滚动条，直接谷歌搜“safari 隐藏滚动条”就有答案了 `scroll-container::-webkit-scrollbar { display: none; }`


如果是横向的滚动条，box 宽度+body 默认边距的宽度超过了屏幕宽度，把默认的边距去掉

[CrispyNoodles]

@wsli10 不是滚动条的问题，我这样写应该是一屏显示，但是现在在 ios 浏览器下没法一屏显示

[wsli10]

@CrispyNoodles 。。你这在哪个浏览器也不会一屏显示啊，跟 ios 有什么关系。box 高度 100%，百分比参考的是 box 的父元素。

这个直接 100vh 吧