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

1,932 阅读1分钟

手机端设置height:100vh时,在safari与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% 时并不会,而是和视口高度一样。

最近两个项目都遇到了这个问题,个人理解原因是vh获取到的是隐藏了地址栏和状态栏的窗口高度???

so 无脑100% 原理不深究。