<p>用 position: fixed 实现侧边栏常驻需设 top/left、width、height（如 calc(100vh - 60px)），避开头部并启用 overflow-y: auto；移动端可用 checkbox + label 无 JS 实现响应式开关。</p>
用 position: fixed 让侧边栏不随滚动消失
侧边栏“常驻”本质是脱离文档流、固定在视口某个位置。最直接有效的方式就是用 position: fixed，而不是 absolute 或 sticky（后者在滚动超出父容器时会失效）。
常见错误是给侧边栏加了 position: fixed，但没设 top 和 left，结果它默认卡在左上角，盖住头部；或者忘了设 width 和 height，导致内容塌缩。
-
top: 0+left: 0是起点，再配合height: 100vh拉满视口高度 - 必须显式设置
width（比如width: 240px），否则 fixed 元素宽度收缩为内容宽 - 若主内容区有
margin-left，要和侧边栏宽度严格对齐，否则留白或重叠
避免 fixed 侧边栏遮挡页面头部或导航栏
很多页面顶部有固定导航栏（header），如果侧边栏也从 top: 0 开始，就会压在它下面——用户看不见侧边栏顶部菜单项，甚至点不到。
解决方法不是调 z-index，而是让侧边栏“避开”导航栏占据的空间：
立即学习“前端免费学习笔记（深入）”；
- 如果导航栏高度是
60px，就给侧边栏加top: 60px，再设height: calc(100vh - 60px) - 更稳妥的做法是用 CSS 自定义属性：定义
--header-height: 60px，侧边栏用top: var(--header-height)，方便后续统一改 - 不要依赖 JavaScript 动态计算高度，容易因渲染时机出错（比如 DOM 尚未挂载完就取
offsetHeight）
侧边栏内滚动独立，不影响主页面滚动
当菜单项多到超出视口高度，需要内部可滚动，但又不能带动整个页面滚——这是 fixed 布局下极易忽略的点。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键在于：给侧边栏容器设 overflow-y: auto，同时确保它的高度是明确的（不能是 min-height 或依赖内容撑开）。
- 错误写法：
height: 100%—— 在 fixed 容器里，% 高度无效，会退化为auto - 正确写法：
height: calc(100vh - 60px)（假设顶栏高 60px），再加overflow-y: auto - 加
overscroll-behavior-y: contain可防止滚动到底时触发主页面滚动（兼容性 OK，Chrome 63+/Firefox 63+）
响应式断点下隐藏侧边栏，用 checkbox + label 模拟开关
移动端通常不常驻侧边栏，而是收起为汉堡菜单。不用 JS 也能实现，靠 HTML 的 input[type="checkbox"] + label + CSS :checked 伪类控制显隐。
核心是把侧边栏包裹进一个 nav，并用相邻兄弟选择器或子元素选择器联动：
- HTML 结构中，
input放在label前面（隐藏它），label作为点击区域，nav紧跟其后 - CSS 中写
input:checked ~ nav { left: 0; }，初始nav设left: -240px+transition - 注意：移动端需加
viewportmeta 标签，否则max-width媒体查询可能不触发
这个方案轻量、无 JS 依赖、SEO 友好，比监听 resize 事件或用 display: none 切换更可靠。
复杂点在于多层嵌套菜单的展开收起动画，CSS 只能做显隐，带高度过渡得用 max-height 配合溢出隐藏——但数值难预估，实际项目中往往还是交给 JS 控制更稳。
