如何实现自适应高度的左侧导航栏（顶部/底部内容始终可见）

本文介绍一种纯 css 方案，通过 `position: sticky` 结合嵌套容器布局，使左侧导航栏中的顶部和底部区域在页面滚动时始终保持可见，无需 javascript，且能自动适配含固定头部的布局。

在构建现代响应式布局时，常需实现「左侧固定宽度导航栏 + 顶部固定 Header + 右侧主内容可滚动」的三栏结构。但一个典型痛点是：若直接给 .sider 设置 height: 100vh，其内部的“TOP SIDER”和“BOTTOM SIDER”会随视口高度拉伸，无法智能避让顶部 Header；而设为 100% 又因父容器无显式高度而失效。

核心思路：不控制 .sider 的整体高度，而是让其内部关键子元素独立“粘性定位”。CSS 的 position: sticky 允许元素在滚动范围内保持相对位置——top: 0 使其贴顶，bottom: 0 使其贴底，二者共存于同一 flex 容器中，借助 flex-direction: column 和 justify-content: space-between 实现自然分离。

以下是优化后的完整实现：

  


  
Fixed Header (Sticky)
  

    

      

        
Top Navigation
        
Bottom Tools
      
    
    

      
Main Content Area
      
This section scrolls independently. Try scrolling up/down — you’ll notice that "Top Navigation" stays pinned just below the header, and "Bottom Tools" remains fixed at the bottom of the viewport — all without JavaScript.

							

								
								

									绘蛙AI修图
									
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
								
								下载 
							
						
      
      

      
End of content
    
  

✅ 关键要点说明：

• ✅ .inner-top 和 .inner-bottom 必须同属一个 flex column 容器（.inner-sider），才能通过 justify-content: space-between 分离，并各自触发 sticky 行为；
• ✅ z-index 用于确保 sticky 元素不被其他层遮挡（尤其当 Header 也 sticky 时）；
• ✅ .sider 保留 height: 100vh 是为保障初始渲染高度，但即使移除，只要 .inner-sider 有 height: 100% 且父级 .sider 被 flex 布局约束，仍可正常工作；
• ⚠️ 注意：sticky 在 Safari 旧版本或某些嵌套 overflow: hidden 场景下可能失效，建议外层容器避免设置 overflow: hidden 或 transform；
• ? 扩展提示：如需支持多级菜单，可将 .inner-top 替换为

该方案轻量、语义清晰、完全基于 CSS，兼顾可维护性与性能，是构建专业管理后台左侧导航的理想实践之一。