本文介绍一种纯 css 方案，通过 position: sticky 分别控制侧边栏内顶部与底部元素的定位，使左侧导航在滚动时始终显示“top sider”和“bottom sider”，且自动适配 header 是否可见，无需 javascript。
在构建响应式布局时，常需实现「左侧固定宽度导航栏 + 顶部固定 Header + 右侧可滚动内容」的经典三栏结构。但一个常见痛点是：若直接对 .sider 设置 height: 100vh，会导致其高度始终基于视口而非可用内容区域，当页面存在固定 Header 时，“底部锚点”（如版权、快捷入口）会因超出视口而不可见；而若改用 100% 又受限于父容器未设高度，无法生效。
核心解法：不约束 .sider 整体高度，而是对内部子元素分别应用 sticky 定位：
- .inner-top 使用 position: sticky; top: 0 —— 始终吸附在容器顶部（即 header 下方或视口顶部，取决于滚动位置）；
- .inner-bottom 使用 position: sticky; bottom: 0 —— 始终吸附在容器底部（即视口底边），即使 .sider 内容高度不足，也能保持可见。
✅ 优势：
- 纯 css 实现，零 js 依赖，性能轻量；
- 自动响应滚动：header 滚出视口后，.inner-top 会自然贴附视口顶部；反之则停驻在 header 下方；
- 兼容现代浏览器（chrome 56+、firefox 59+、safari 15.4+、edge 79+）；
- 不破坏 flex 布局流，不影响右侧 .content 的正常滚动行为。
? 示例代码（关键 CSS 片段）：
.inner-top { position: sticky; top: 0; background-color: #4a6fa5; /* 可选：增强视觉区分 */ padding: 8px 12px; z-index: 10; } .inner-bottom { position: sticky; bottom: 0; background-color: #3a5a8c; padding: 8px 12px; z-index: 10; }⚠️ 注意事项：
- 确保 .sider 的父容器（即 .main）不设置 overflow: hidden 或 overflow: auto，否则会截断 sticky 元素；
- .inner-sider 必须保留 display: flex; flex-direction: column; justify-content: space-between，以维持初始布局逻辑；
- 若 .sider 内需嵌入长菜单（非仅两个锚点），建议将菜单容器设为 flex: 1 并启用 overflow-y: auto，确保中间区域可滚动，而 top/bottom 元素仍 sticky；
- 在 Safari 中，需确保 sticky 元素的祖先节点无 transform、Filter 或 perspective 等属性（会创建新的层叠上下文，导致 sticky 失效）。
该方案优雅地规避了动态计算高度的复杂性，让左侧导航真正“智能贴边”，是现代 CSS 布局中 sticky 定位的典型实践范例。