移动端 WebKit 中 100vh 的 CSS 修复

当询问人们他们想要修复 CSS 中的 任何 问题时，一个令人惊讶的常见回答是改进视窗单位的处理方式。

一个经常出现的问题是如何将它们与滚动条相关联。例如，如果一个元素的大小设置为 100vw 并且延伸到边缘，那么只要页面没有垂直滚动条，一切就都很好。如果页面确实有垂直滚动条，那么 100vw 就会太宽，并且垂直滚动条的存在会触发 水平 滚动条，因为视窗单位没有优雅/可选的方式来处理这种情况。因此，您可能需要隐藏 body 上的溢出，而实际上您并不需要这样做，例如。（演示）

另一种情况涉及移动浏览器。您可能会使用视窗单位来帮助您将固定页脚定位在屏幕底部。但是，浏览器 chrome 可能会出现（例如导航、键盘等），它可能会覆盖页脚，因为移动浏览器不会认为视窗大小有任何变化。

Matt Smith 记录 了这个问题

以及一个解决方案

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

上面已更新，以确保使用的是 html 元素，因为 我们被告知 Chrome 正在更新行为以匹配 Firefox 的实现。

这真的有效吗？ […] 我在我运行的所有测试中都没有遇到任何问题，而且我现在正在生产环境中使用这种方法。但我确实收到了一些回复我的推文的回复，指出了使用这种方法的其他可能问题（旋转设备的影响，Chrome 完全忽略了该属性等）。

将来最好能找到一个真正的跨浏览器解决方案，但我没有看到使用它作为改进有任何问题。使用供应商前缀属性作为渐进式增强很奇怪，但嘿，这个世界就是这么奇怪的。

直接链接 →