1. 问题场景与目标
1.1 典型场景与目标
在复杂布局中，滑动区域的高度计算常常受限于视口高度的变化，尤其当页面包含固定头部或底部导航时。若直接使用简单的高度值，滚动区域往往会被遮挡或出现多余空白，影响用户体验。
你可能会遇到的具体问题是：100vh 的视口单位在移动端会随地址栏显示/隐藏而改变，导致原本应占满屏幕的滚动区域发生错位。
本节的目标是明确通过calc 搭配 vh的方式来计算“滑动区域的可用高度”，确保无论设备、系统或浏览器状态如何，滚动区始终在可视区内正确填充。
2. 关键原理与要点
2.1 vh 与 calc 的工作原理
vh 单位表示视口高度的百分比；例如 100vh 等于当前可见区域的实际高度。结合 calc()，你可以把高度表示为一个表达式，例如 calc(100vh - 64px) 来保留一个固定头部的空间。
通过 calc(100vh - 头部高度) 的表达式，可以把滑动区域的高度动态地“拉伸”到剩余的可用高度，避免覆盖或滚动区域太小的问题。
需要注意的是，在移动端，地址栏或工具栏的显示/隐藏会改变实际可用高度，因此仅用 100vh 可能仍然不足，需要借助 calc 进行偏移与自适应处理。
3. 实现思路与步骤
3.1 设计流程与步骤
第一步，确定固定头部高度并用 CSS 变量保存，便于在多处复用与调整。
第二步，为滑动区域设置高度为 calc(100vh - var(--header-height))，并且让滚动区拥有 overflow-y: auto。
第三步，为了避免头部遮挡内容，给滚动区域增加内边距或为内容区留出等同头部高度的空白区域，确保滚动内容在不被遮挡的区域滚动。
第四步，如头部高度在不同屏幕或状态下变化，可以通过 媒体查询或动态更新 CSS 变量来实现自适应。
4. 代码实现示例
4.1 最小可复现示例
下面的示例展示了一个固定头部和可滚动内容区域的布局，利用 calc(100vh - var(--header-height)) 实现自适应高度，并通过 padding 将内容避免被头部遮挡。
:root {--header-height: 64px; /* 固定头部高度，后续可在不同屏幕使用媒体查询调整 */
}
html, body {height: 100%;margin: 0;
}
.site-header {position: fixed;top: 0;left: 0;right: 0;height: var(--header-height);background: #2c7be5;color: white;display: flex;align-items: center;padding: 0 16px;z-index: 10;
}
.main {height: calc(100vh - var(--header-height)); /* 滑动区域的总高度 */overflow: hidden;
}
.scroll-area {height: 100%;overflow-y: auto;padding-top: var(--header-height); /* 预留出头部的空间，避免遮挡内容 */background: #f5f5f7;
}
.section {padding: 16px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title> Calc + vh 滚动区自适应示例 </title><style>/* 上方的 CSS 内容同上方的 CSS 代码块，请按需粘贴使用 */</style>
</head>
<body><header class="site-header" aria-label="顶部导航"><div>页面标题</div></header><main class="main" role="main"><section class="scroll-area" aria-label="滚动内容区域"><div class="section"><h2>示例内容段落</h2><p>这里放大量文本用于演示滚动效果……</p><p>重点：通过 calc 与 vh 的组合实现自适应高度。</p><p>继续填充内容，确保滚动条出现。</p></div><div class="section">更多内容……</div></section></main>
</body>
</html>
5. 浏览器兼容性与测试要点
5.1 移动端的行为差异与调试
现代浏览器普遍支持 calc 和 vh，但在极端状态下（如快速切换地址栏显示、手机桌面模式切换等）仍需测试确保滚动区域不会覆盖内容。
在实际调试中，建议通过多设备缩放和高低状态截图来验证：scroll-area 的高度是否始终等于可视区域的剩余高度，以及头部是否正确固定不影响滚动区。
如果遇到少数浏览器对 vh 的实现有偏差，可以考虑结合 min-height/max-height 配合 calc 做兜底，确保在极端场景下也能保持可滚动区域的正确高度。
