本文详解如何通过 css 精确控制页面布局，使固定高度的导航栏（navbar）不参与滚动，而内容区（content）拥有独立垂直滚动条，避免滚动条侵入导航区域。
在构建单页应用或静态页面时，常需将导航栏（
）固定于顶部，同时确保下方内容区可独立滚动——尤其当内容高度远超视口时。关键在于：导航栏必须脱离文档流滚动影响，且内容区需严格占据剩余可用高度，并启用自身滚动机制。若简单对 body 或整个容器设置 overflow: auto，滚动条会覆盖 navbar 或导致其随内容一起滚动，违背设计初衷。
✅ 正确实现原理
核心思路是：
- 将 html 和 body 设为 height: 100vh，并清除默认边距；
- 导航栏使用固定高度（如 50px），并设置 overflow: hidden（防意外溢出）；
- 内容区通过 height: calc(100vh - 50px) 动态计算剩余空间，并显式声明 overflow: auto（或 overflow-y: auto）以启用垂直滚动。
⚠️ 注意：vh 单位基于视口高度，需确保无其他全局 padding/margin 干扰计算；移动端需额外处理 viewport 缩放兼容性。
✅ 完整 CSS 示例
/* 重置基础尺寸与间距 */
html, body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 50px;
overflow: hidden; /* 防止内部内容溢出干扰布局 */
background-color: #4a6fa5;
position: sticky;
top: 0;
z-index: 100;
}
.content {
height: calc(100vh - 50px); /* 精确扣除 navbar 高度 */
overflow-y: auto; /* 仅允许垂直滚动 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
background-color: #f8f9fa;
}✅ HTML 结构（保持语义化）
固定导航 + 独立内容滚动
? 进阶优化建议
- 响应式适配：若 navbar 高度随屏幕变化（如移动端折叠），推荐改用 CSS 自定义属性（--navbar-height）配合 calc()，便于 JS 动态更新。
- 无障碍增强：为 .content 添加 tabindex="0"，确保键盘用户可通过 Tab 键聚焦并滚动。
- 性能提示：避免对 .content 使用 transform 或 filter，防止触发非合成层滚动，影响滚动流畅度。
- 现代替代方案：CSS Grid 可更简洁实现（如 grid-template-rows: 50px 1fr），但需考虑旧版浏览器兼容性。
通过以上方案，你将获得一个稳定、语义清晰且跨设备可用的“固定导航 + 独立内容滚动”布局，滚动行为完全符合用户预期，且无视觉干扰。
立即学习“前端免费学习笔记（深入）”；
