Safari浏览器底部地址栏会挡住页面部分内容

Gemini给出的解决办法

这是一个非常经典的 iOS Safari “痛点”。在苹果手机上，Safari 的底部动态地址栏（以及微信内置浏览器的底部导航条）会随着用户的滚动或点击弹出，而传统的 height: 100vh 常常会把这部分高度也算进去，导致页面最底部的内容（或者你的滚动区域底部）被无情遮挡。

要彻底解决这个问题，我们需要引入现代 CSS 的动态视口单位：dvh (Dynamic Viewport Height)。它会自动根据 Safari 底部地址栏的显示或隐藏，实时调整自身高度。

以下是修复该问题后的完整代码。我主要调整了 body、.sidebar、.main-content 的高度计算方式，并对移动端的一些细节进行了安全区域（Safe Area）适配

核心修复要点解读：

1. height: 100dvh（关键核心） 在 body、.sidebar 和隐藏遮罩层上，我将原本的 height: 100vh 换成了：

   CSS

   height: 100vh;
   height: 100dvh;
   

   第一行的 100vh 用于兼容不支持新特性的老旧浏览器，而 100dvh 会让现代 iOS Safari 动态捕获地址栏高度。无论地址栏是展开、还是用户往下滚动后地址栏缩回，整个父容器都能精准卡在屏幕边缘，不会有多余内容掉进地址栏下方。

2. viewport-fit=cover 开启全面屏适配 在顶部的 <meta name="viewport"> 中，加入了 viewport-fit=cover。告诉苹果浏览器：“我的页面已经做好准备，可以将背景延伸到手机最底部的黑条（Home Indicator）区域和刘海屏内了。”

3. env(safe-area-inset-bottom) 安全距离 在手机端媒体查询（max-width: 768px）中，我调整了主面板和侧边栏的 padding-bottom：

   CSS

   padding-bottom: calc(8px + env(safe-area-inset-bottom));
   

   这个系统变量能自动获取苹果手机底部黑条线所需的高度（在非全面屏上自动为 0）。这确保了 iframe 内部的内容以及弹出的侧边栏菜单底端，永远不会和手机底部的系统触控栏重叠，操作体验更像原生 App。