css - 在 iOS 上折叠 Safari 导航栏时保持元素固定

Question

我正在开发一个基于 Hyde theme 的网站对于 Jekyll。

此布局在左侧使用宽度为 100% 的固定导航栏。这在大多数情况下都能正常工作。

但是，在 iOS 上的 Safari 中，当用户滚动浏览器顶部导航栏时，视口(viewport)的高度会发生变化。如果发生这种情况，导航栏的大小直到滚动停止才会更新，从而在左下角留下一个未被导航栏覆盖的区域:

(注意文本延伸到导航栏下方。此屏幕截图是在页面运行时截取的。)

This video显示实际问题。

有没有办法强制 Safari 在滚动过程中更新导航栏的高度？

Answer 1

这是一个持续的讨论。这个问题没有真正的解决方案。 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

您可以为您的网站尝试以下操作:

.sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 18rem;
    text-align: left;
    height: 100vh;
}

这将使侧边栏与底部对齐，并且文本不会被剪切。白色条将出现在顶部，但它不会因为底部被切掉而过于干扰。