侧栏导航需弹性占位与精确避让：用flex布局包裹nav和main，sidebar设flex: 0 0 240px，content设flex: 1且min-width: 0；侧栏内用sticky定位头部和底部元素，配合height: 100vh与overflow-y: auto；响应式下改用flex布局li、gap间距、缩小padding/font-size并加text-overflow；calc仅用于宽度减法，严格空格；必加box-sizing: border-box和min-width: 0。
侧栏导航在文档阅读页里不能简单设 width: 200px 就完事——它得随主内容区动态缩放，同时保持可读性、不遮挡文字、滚动时顶部/底部关键项还要锚定。核心不是“固定宽度”，而是“弹性占位 + 精确避让”。
用 Flex 布局隔离侧栏与主内容区
别把 和 放在无约束的 下直接定位。必须用一个 display: flex 的父容器包裹二者，否则 flex: 1 或 calc() 都会失效。
-
.layout { display: flex; min-height: 100vh; }—— 父容器设最小全高，避免内容短时侧栏塌陷 -
.sidebar { flex: 0 0 240px; }—— 固定基础宽（不放大、不缩小、基准 240px），比width: 240px更安全，防止被 flex 容器压缩 -
.content { flex: 1; min-width: 0; }—— 主区自动伸展；min-width: 0是关键，防止单词过长或图片撑破布局
侧栏内部用 sticky 实现“视觉自适应高度”
给整个 .sidebar 设 height: 100vh 是错的：它无视顶部
-
.sidebar-header { position: sticky; top: 0; z-index: 10; }—— 仅此一项贴顶，其余内容正常流式滚动 -
.sidebar-footer { position: sticky; bottom: 0; z-index: 10; }—— 底部信息始终可见，无需 JS 监听 scroll -
.sidebar { height: 100vh; overflow-y: auto; }—— 容器需有明确高度才能触发 sticky 行为，且允许内部滚动 - 确保
.sidebar父级（即.layout）没有overflow: hidden，否则 sticky 会被截断
响应式缩放时避免导航项溢出
文档页常需适配小屏（如平板横屏转竖屏），此时固定 padding: 1rem 1.5rem 会让文字挤成一团甚至换行错乱。问题不在 flex，而在内边距单位和换行策略。
- 把
li改为display: flex容器，而非inline-block—— 后者无法响应式收缩 - 用
gap: 0.5rem替代margin控制间距，避免外边距塌陷 -
a { padding: 0.5rem 0.75rem; font-size: 0.875rem; }—— 小屏下主动减小内边距和字号，保留可点击区域 - 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;到链接文本，防长标题破坏布局
calc() 只用于宽度微调，别碰高度和动态值
calc() 在侧栏场景里只适合做“减法”：比如已知左侧固定 240px，右侧主区要留 16px 间距，则写 width: calc(100% - 240px - 16px)。但它不是万能胶——任何涉及 scrollY、clientHeight 或运行时计算的逻辑，都该交给 sticky 或 flex 处理。
- 语法必须严格：
calc(100% - 240px)✅，calc(100%-240px)❌（减号前后缺空格，整条声明失效） - 别在
height上用calc(100vh - 64px)模拟 header 避让——sticky 子元素更可靠，且兼容 header 高度变化 - 所有含
padding或border的侧栏子元素，务必加box-sizing: border-box，否则width: 240px实际占位可能超 256px
最易被忽略的是 min-width: 0 和 box-sizing: border-box 这两个开关：前者管住 flex 项不撑破容器，后者确保宽度计算不翻车。没它们，再漂亮的 sticky 和 calc 也会在某个窄屏或长标题下突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
