Safari iOS 15 移动版：固定元素在底栏消失时跳转

Question

假设我们有一个固定的侧边栏，如下所示：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 17em;
  height: 100%;
}

当 Safari 底部栏可见时，这是可以的，但是当向下滚动时，它会消失，侧边栏会在原来的位置保留一段时间，然后跳转到填充下面的空间。它看起来很麻烦。

height我尝试用以下解决方案之一进行替换，但没有一个起作用：

height: 100vh; // Sidebar is under the bottom bar

height: -webkit-fill-available; // Sidebar doesn't adjust its height

height: var(--window-inner-height); // CSS prop set via JS window.innerHeight. Same above

bottom: 0;

有什么想法可以解决吗？

Answer 1

safe-area-inset-bottom您应该在底部边距或填充中使用环境变量。

您可以在Jen Simmons 的视频中看到一个示例（从 16:44 分钟开始观看）