ios 移动端样式求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 434 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

3 条回复 • 2023-09-27 12:30:56 +08:00

wsli10

2023-09-26 18:52:01 +08:00

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

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

CrispyNoodles

2023-09-27 10:15:27 +08:00

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

wsli10

2023-09-27 12:30:56 +08:00 via Android

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

这个直接 100vh 吧