本文详解如何通过纯 css 实现左侧导航栏在存在固定头部时自动适配可视区域高度，使“顶部项”和“底部项”始终吸附于视口上下边缘，无需 javascript。
在构建现代响应式布局时，常需实现「固定 Header + 左侧 Sticky 导航 + 可滚动主内容」的经典三栏结构。但一个常见痛点是：当使用 height: 100vh 设置左侧导航高度时，它会占据整个视口高度，导致导航内部的顶部/底部元素（如菜单标题、用户信息）无法智能避让 Header —— 尤其当页面滚动、Header 部分或完全移出视口时，导航栏却仍“僵直”地撑满全高，破坏视觉锚定逻辑。
问题核心在于：100vh 是静态值，不感知页面其他元素的布局占位；而 position: sticky 的吸附行为依赖于其父容器的可滚动上下文与边界约束。因此，正确解法不是强行计算减去 Header 高度，而是将吸附逻辑下沉到导航内部子元素层级，让 .inner-top 和 .inner-bottom 分别独立 sticky 到视口顶部与底部。
以下是优化后的完整实现方案：
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.header {
background-color: #e74c3c;
color: white;
padding: 16px 24px;
font-weight: bold;
position: sticky;
top: 0; /* 确保 Header 自身也 sticky，避免遮挡 */
z-index: 100;
}
.main {
display: flex;
flex-direction: row;
min-height: 100vh; /* 保证主容器至少占满视口 */
}
.sider {
width: 240px;
background-color: #3498db;
color: white;
position: sticky;
top: 0;
height: 100vh; /* 作为 sticky 容器，需明确高度以提供滚动上下文 */
overflow: hidden; /* 防止内部 sticky 元素溢出干扰 */
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 0;
/* 关键：启用 flex 容器的 stretch 行为，确保子项能响应 sticky */
}
.inner-top {
position: sticky;
top: 0;
padding: 12px 24px;
background-color: rgba(0,0,0,0.1);
font-weight: 600;
z-index: 10;
}
.inner-bottom {
position: sticky;
bottom: 0;
padding: 12px 24px;
background-color: rgba(0,0,0,0.1);
font-size: 0.9em;
z-index: 10;
}
.content {
flex: 1;
padding: 24px;
background-color: #ecf0f1;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="header">Main Header (Sticky)</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div class="inner-top">☰ Navigation Menu</div>
<div class="inner-bottom">© 2024 App</div>
</div>
</div>
<div class="content">
<h2>Main Content Area</h2>
<p>This section scrolls independently. Try scrolling down — you’ll notice "Navigation Menu" stays pinned to the top of the sidebar viewport, and "© 2024 App" remains fixed at the bottom — even while the header scrolls away.</p>
<!-- 模拟长内容 -->
<div style="height: 200vh; background: linear-gradient(to bottom, #bdc3c7, #95a5a6); margin-top: 20px;"></div>
</div>
</div>
</body>
</html>✅ 关键要点说明：
- .sider 必须设 height: 100vh 且 position: sticky，为其内部 sticky 子元素提供有效的滚动容器上下文；
- .inner-top 和 .inner-bottom 各自设置 position: sticky 并分别指定 top: 0 与 bottom: 0，它们将相对于 .sider 的可视区域吸附，而非整个页面；
- 不需要 JS 计算 Header 高度或监听 scroll 事件 —— 浏览器原生 sticky 机制自动处理；
- 注意添加 z-index 控制层叠顺序，避免被内容遮盖；
- 若实际项目中 .sider 内含复杂菜单（如多级折叠），建议将菜单整体包裹在 .inner-sider 中，并确保其 flex-direction: column 与 justify-content: space-between 维持布局弹性。
⚠️ 注意事项：
- position: sticky 在 Safari 旧版本（< iOS 15.4 / macOS 12.3）中对 flex 容器子项的支持存在兼容性问题，生产环境建议添加 -webkit-sticky 前缀并测试；
- 避免给 .inner-sider 设置 overflow: auto，否则会切断 sticky 的视口绑定关系；
- 若 Header 高度动态变化（如响应式折叠），sticky 仍可靠，因其基于当前渲染状态实时计算。
该方案以最小侵入性、零运行时开销，精准达成「Header 可滚动、Sidebar 内部 Top/Bottom 永驻视口」的设计目标，是现代 CSS 布局能力的典型实践。
