通过设置导航栏固定高度、内容区使用 `calc(100vh - navbar-height)` 并启用 `overflow: auto`，可实现导航栏无滚动条、内容区独立垂直滚动的布局效果。
在构建单页应用或固定头部布局时，常需让导航栏（navbar）始终可见、不随内容滚动，同时确保内容区域（content）在超出视口时能独立滚动——且滚动条仅出现在内容区内部，而非整页或覆盖在导航栏下方。关键在于分离视觉层级与滚动上下文。
✅ 正确实现原理
- 导航栏（.navbar）：设为固定高度（如 50px），overflow: hidden 防止意外溢出，width: 100% 撑满；无需设置 height: 100vh 或 overflow 相关滚动属性。
- 内容区（.content）：使用 height: calc(100vh - 50px) 精确占据剩余视口高度，并声明 overflow: auto（或 overflow-y: auto）——这将使滚动条仅作用于该容器内部，且默认显示在右侧边界，完全避开导航栏。
- 全局重置：html, body { height: 100vh; margin: 0; padding: 0; } 消除默认边距，确保尺寸计算准确。
? 完整 CSS 示例
html, body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 50px;
overflow: hidden;
background-color: #4a6fa5;
position: sticky;
top: 0;
z-index: 1000;
}
.content {
height: calc(100vh - 50px);
overflow-y: auto;
background-color: #f8f9fa;
padding: 1.5rem;
}? 提示：添加 position: sticky; top: 0; z-index: 1000 可进一步增强 navbar 的粘性表现（在支持 sticky 的现代浏览器中），确保其始终锚定在视口顶部，即使内容滚动也不移位。
⚠️ 注意事项
- 避免 overflow: hidden 在 body 上：否则整个页面将无法滚动，违背需求；
- 慎用 height: 100% 替代 100vh：100% 依赖父元素高度，而 html/body 若未显式设高，会导致计算失效；
- 响应式适配：若 navbar 高度在移动端变化（如 @media (max-width: 768px) 下变为 60px），需同步更新 calc(100vh - 60px)；
- 滚动条样式可定制：如需隐藏原生滚动条（仅保留功能），可用 ::-webkit-scrollbar { display: none; }（Webkit 内核），但需搭配 padding-right 或 margin-right 避免内容被裁切。
该方案兼容所有现代浏览器，语义清晰、性能高效，是实现「固定导航 + 独立内容滚动」的标准实践。
