iPhone下面灰色区域怎么去掉？

在使用 iPhone 浏览网页时，很多用户或开发者会发现页面底部出现一块无法滚动的灰色区域（尤其在 Safari 中）。这通常不是网页内容本身的问题，而是 iOS 系统对 Safari 地址栏/工具栏动态显示机制造成的视觉错觉或布局计算偏差。

常见原因

1. 视口高度（vh）计算不准确：iOS Safari 对 100vh 的解释包含地址栏高度，导致实际内容超出可视区域。
2. 页面未设置合适的 viewport：缺少正确的 meta viewport 标签。
3. body 或 html 高度被强制设为 100%，但未考虑 Safari 工具栏动态变化。

解决方案

1. 使用 JavaScript 动态设置高度

用 JS 获取实际可视高度并赋给根元素：

<script>
  function setAppHeight() {
    const app = document.getElementById('app');
    app.style.height = window.innerHeight + 'px';
  }
  window.addEventListener('resize', setAppHeight);
  setAppHeight();
</script>

2. CSS 安全区域适配（推荐）

利用 CSS 环境变量 env(safe-area-inset-bottom) 避免内容被遮挡：

body {
  padding-bottom: env(safe-area-inset-bottom);
}

3. 避免使用 100vh

改用 100dvh（动态视口高度单位，现代浏览器支持）：

.full-height {
  height: 100dvh; /* 更准确的全屏高度 */
}

总结

iPhone 底部灰色区域本质是 Safari 浏览器 UI 与网页布局交互的结果。通过合理使用 safe-area-inset、避免硬编码 100vh，或用 JS 动态设置高度，可有效消除该问题，提升移动端体验。