移动端 body 高度为100vh 时，实际高度超过了视窗高度。

Question

在手机端设置 height:100vh 时，在 Chrome 模拟是正常的

实际真机浏览的时候 100vh 的高度会超过窗口的实际高度，并显示滚动条。

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
html {
  width: 100vw;
  height: 100vh;
  border: 5px solid red;
  overflow: hidden;
}

图:

---

使用 height:100% 时并不会，而是和屏幕高度一样。

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
  border: 5px solid red;
  overflow: hidden;
}

图:

---

不光是 safari,在移动端的 Chrome 中也是这样。

According to developers.google the vh is always calculated as if the URL bar is hidden since Chrome version 56

所以，vh 获取到的是隐藏了地址栏和状态栏的窗口高度？

但是实际在开发中，也都是推荐使用vw,vh为单位。

张鑫旭： height:100% 在复杂场景下会有意外

Answer 1

你的理解基本正确，我来说一下正解吧

html,body{
    height:-webkit-fill-available;
}

Answer 2

2023年了，今天刷到一篇文章 🔗 New Viewport Units，里面提到了一些新的视口单位，就突然想到了这个问题。所以回来更新一下回答内容。

• svw、svh：分别为视口较小尺寸的宽度和高度的 1%。
• lvw、lvh：分别为视口大尺寸的宽度和高度的 1%。
• dvw、dvh：分别为动态视口的宽度和高度的 1%。

当然现在提案还是处于草案阶段，但是现代浏览器已经全线支持了 👇

以后可以直接使用 height: 100dvh 或者 height: 100svh 来解决 height:100vh 时会被地址栏和工具栏遮住一部分的问题了。

---

当然如果考虑兼容性问题的话，还是可以按照我在问题中提到的 html,body 设置 height:100% 或者 height: fill-available(需要兼容前缀)的方式来处理。

Answer 3

楼主解决了吗