javascript - iOS 浏览器 : For a overlay like a pop up menu 100vh does not work correctly and gets hidden under the 44px pixel high menu bar of safari

Question

问题是 100vh 在 iOS Safari 中没有正确处理。它错误地计算了到 safari 菜单栏底部的高度 [在底部]，并将弹出菜单渲染到菜单栏的下边缘。这导致菜单被部分隐藏并产生问题是使用 100vh 为跨设备设计一个可滚动的弹出菜单。 details here | more details here

因此希望找到不使用 100vh 的替代解决方案，使其适用于所有浏览器和平台。

Answer 1

我通过将菜单高度设置为 window['innerHeight'] + 'px' 而不是使用 100vh 解决了这个问题。

然后我随着浏览器大小的变化更新高度[下面的伪代码]

addEventListener('resize', () => menu.style.height = window['innerHeight'] + 'px');

这适用于所有浏览器和移动设备。