与iOS Safari说再见：100vh导致的溢出灾难

100vh：iOS Safari 中的视口高度迷思

导语：

100vh 是一个 CSS 属性，用于将元素的高度设置为视口高度。这个看似简单的属性，却在 iOS Safari 浏览器中掀起了一场轩然大波。本文将深入探讨 100vh 在 iOS Safari 中引发的溢出问题，并提供行之有效的解决方案。

问题根源：iOS Safari 视口计算的奥秘

问题的症结在于 iOS Safari 计算视口高度的方式与其他浏览器不同。在大多数浏览器中，视口高度指的是浏览器窗口的可见区域，不包括地址栏、工具栏等浏览器元素。然而，iOS Safari 却将视口高度计算为整个浏览器窗口的高度，包括了地址栏、工具栏等元素。

这种差异导致了 100vh 在 iOS Safari 中出现溢出问题。当你在其他浏览器中使用 100vh 时，元素的高度将根据视口可见区域的高度进行计算，而不会被地址栏或工具栏侵占空间。然而，在 iOS Safari 中，元素的高度却根据整个浏览器窗口的高度进行计算，因此很容易超出视口可见区域，造成溢出。

解决方案：巧妙减法，掌控视口高度

既然知道了问题的根源，那么解决方案也就呼之欲出了。我们只需要在计算元素的高度时，将地址栏和工具栏的高度从视口高度中减去即可。

/* 设置根元素 html 的 font-size 为 16px，以便计算出地址栏和工具栏的高度 */
html {
  font-size: 16px;
}

/* 计算地址栏和工具栏的高度 */
$header-height: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));

/* 将元素的高度设置为视口高度减去地址栏和工具栏的高度 */
.my-element {
  height: calc(100vh - $header-height);
}

通过这种方法，我们就可以确保元素的高度始终不会超出视口可见区域，从而避免溢出问题。

浏览器兼容性：跨平台无忧

需要注意的是，上述解决方案仅适用于 iOS Safari。在其他浏览器中，你仍然可以使用 100vh 属性，而无需进行任何调整。这可以确保你的网页在不同浏览器中都能正常显示，保持跨平台兼容性。

FAQ：常见问题解答

Q1：为什么在 iOS Safari 中 100vh 会导致溢出？

A： 因为 iOS Safari 将视口高度计算为整个浏览器窗口的高度，包括地址栏和工具栏，而其他浏览器则将视口高度计算为浏览器窗口的可见区域。

Q2：如何解决 iOS Safari 中 100vh 溢出问题？

A： 在计算元素的高度时，将地址栏和工具栏的高度从视口高度中减去。

Q3：在其他浏览器中可以使用 100vh 吗？

A： 是的，可以在其他浏览器中使用 100vh，无需进行任何调整。

Q4：iOS Safari 中 100vh 溢出问题还有其他解决方案吗？

A： 有，其他解决方案包括使用百分比高度或设置视口元标记。然而，这些解决方案可能会在其他浏览器中导致问题，因此不建议使用。

Q5：是否存在任何工具或库可以帮助解决 iOS Safari 中的 100vh 溢出问题？

A： 有，存在一些工具和库可以帮助解决这个问题，例如 viewport-units-buggyfill 和 vh-unit-polyfill。

结语：

100vh 在 iOS Safari 中导致的高度溢出问题曾让无数网页设计师和前端开发人员头疼不已。如今，我们已经找到了解决之道。通过巧妙地计算视口高度，我们能够轻松控制元素的高度，避免溢出问题，重拾网页布局的控制权。

100vh，不再是 iOS Safari 的梦魇，而是设计师和开发者的得力助手。愿这篇文章能帮助你彻底解决 100vh 溢出问题，让你在网页设计的道路上畅通无阻，尽情挥洒创意！