通过设置导航栏固定高度并隐藏溢出，同时为内容区精确计算剩余视口高度并启用 `overflow: auto`，即可实现导航栏不参与滚动、内容区域独立滚动的布局效果。
在构建单页应用或静态页面时，常需将导航栏（navbar）固定于顶部，而让下方内容区域在超出视口时独立滚动——此时关键诉求是：导航栏自身不可滚动、不出现滚动条；滚动行为仅发生在内容区内部，且滚动条不“穿透”或“覆盖”导航栏。这并非简单设置 overflow: hidden 即可解决，而需结合视口单位（vh）、CSS 计算函数（calc()）与盒模型控制来实现精准布局。
✅ 推荐实现方案
核心思路是：
- 将 <html> 和 <body> 设为全屏高度（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% 依赖父容器高度，而 <body> 在未显式设高时可能无法继承 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 进行优化。
✅ 完整可运行示例（精简版）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar + Scrollable Content</title>
<style>
html, body { width: 100%; height: 100vh; margin: 0; padding: 0; }
.navbar { height: 50px; background: #4CAF50; overflow: hidden; }
.content {
height: calc(100vh - 50px);
overflow-y: auto;
padding: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
</style>
</head>
<body>
<div class="navbar">导航栏（固定高度，无滚动）</div>
<div class="content">
<h2>可滚动内容区</h2>
<p>此处插入长文本或动态内容……</p>
<!-- 实际项目中可嵌入卡片、列表、表单等 -->
</div>
</body>
</html>该方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79），无需 JavaScript，纯 CSS 驱动，语义清晰、维护性强，是实现「导航栏静止 + 内容独立滚动」的标准解法。
