本文介绍一种纯 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.
      
      
      
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，兼顾可维护性与性能，是构建专业管理后台左侧导航的理想实践之一。

# css  # javascript  # java  # html  # go  # app  # safari  # mac  # ai  # apple  # 响应式布局 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 实例解析angularjs的filter过滤器  高防服务器租用指南：配置选择与快速部署攻略  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  黑客如何利用漏洞与弱口令入侵网站服务器？  简单实现Android验证码  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  动图在线制作网站有哪些,滑动动图图集怎么做？  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  如何用景安虚拟主机手机版绑定域名建站？  如何在IIS中新建站点并解决端口绑定冲突？  Linux系统运维自动化项目教程_Ansible批量管理实战  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  青岛网站建设如何选择本地服务器？  如何快速登录WAP自助建站平台？  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  移动端脚本框架Hammer.js  JS去除重复并统计数量的实现方法  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  香港服务器WordPress建站指南：SEO优化与高效部署策略  轻松掌握MySQL函数中的last_insert_id()  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  网站页面设计需要考虑到这些问题  如何在阿里云虚拟服务器快速搭建网站？  Laravel如何使用Blade组件和插槽？（Component代码示例）  在线教育网站制作平台,山西立德教育官网？  如何用AWS免费套餐快速搭建高效网站？  nginx修改上传文件大小限制的方法  晋江文学城电脑版官网 晋江文学城网页版直接进入  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  如何用y主机助手快速搭建网站？  高防服务器租用首荐平台，企业级优惠套餐快速部署  简历在线制作网站免费版,如何创建个人简历？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  原生JS获取元素集合的子元素宽度实例  PHP正则匹配日期和时间(时间戳转换)的实例代码  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  Laravel如何创建自定义中间件？（Middleware代码示例）  如何破解联通资金短缺导致的基站建设难题？  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  Linux系统命令中tree命令详解  魔毅自助建站系统：模板定制与SEO优化一键生成指南  音响网站制作视频教程,隆霸音响官方网站？  如何获取PHP WAP自助建站系统源码？