通过设置导航栏固定高度并隐藏溢出，同时为内容区精确计算剩余视口高度并启用 `overflow: auto`，即可实现导航栏不参与滚动、内容区域独立滚动的布局效果。
在构建单页应用或静态页面时，常需将导航栏（navbar）固定于顶部，而让下方内容区域在超出视口时独立滚动——此时关键诉求是：导航栏自身不可滚动、不出现滚动条；滚动行为仅发生在内容区内部，且滚动条不“穿透”或“覆盖”导航栏。这并非简单设置 overflow: hidden 即可解决，而需结合视口单位（vh）、CSS 计算函数（calc()）与盒模型控制来实现精准布局。
✅ 推荐实现方案
核心思路是：
- 将 html> 和 设为全屏高度（100vh），并清除默认边距；
- 导航栏设为固定高度（如 50px），并声明 overflow: hidden 防止意外溢出；
- 内容区高度 = 视口总高 − 导航栏高度，使用 calc(100vh - 50px) 精确计算；
- 内容区设置 overflow: auto（或 overflow-y: auto），确保仅在内容超长时显示垂直滚动条。
html, body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 50px;
overflow: hidden; /* 彻底禁用 navbar 自身滚动 */
background-color: #ffeb3b; /* 示例色，便于识别 */
position: sticky; /* 可选：保持顶部吸附（需配合 top: 0） */
top: 0;
z-index: 1000;
}
.content {
height: calc(100vh - 50px); /* 严格扣除 navbar 高度 */
overflow-y: auto; /* 仅允许垂直滚动，更符合语义 */
background-color: #f5f5f5;
padding: 1rem;
}⚠️ 注意事项与最佳实践
- 避免使用 height: 100%：100% 依赖父容器高度，而 在未显式设高时可能无法继承 100vh，故直接使用 100vh 更可靠；
- 慎用 position: fixed：若 navbar 使用 fixed，需为 .content 添加 margin-top: 50px 或 padding-top: 50px，否则内容会被遮挡；而 sticky + top: 0 在多数现代浏览器中更语义化且支持自然文档流；
- 响应式适配：若 navbar 高度随屏幕变化（如移动端折叠），建议改用 CSS 自定义属性（--navbar-height）配合 calc(100vh - var(--navbar-height))，便于 JS 动态更新；
- 无障碍考虑：确保滚动区域有明确的 role="region" 和 aria-label（如 aria-label="主内容区域"），提升屏幕阅读器体验；
- 性能提示：overflow: auto 在内容大量时可能触发重排，若存在性能问题，可添加 contain: layout style 到 .content 进行优化。
✅ 完整可运行示例（精简版）
Navbar + Scrollable Content
该方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79），无需 JavaScript，纯 CSS 驱动，语义清晰、维护性强，是实现「导航栏静止 + 内容独立滚动」的标准解法。
立即学习“前端免费学习笔记（深入）”；
