fixed侧边栏“看不见”或“错位”是因为默认定位在视口左上角且未显式设置top-0 left-0，或父容器overflow-hidden将其裁剪；h-full失效需改用h-screen或calc(100vh-xxpx)，主内容须ml-64避让，侧边栏内部需设高度与overflow-y-auto确保滚动。
fixed侧边栏为什么“看不见”或“错位”
直接加 fixed w-64 很容易让侧边栏消失——它确实脱离了文档流，但默认定位在视口左上角（top: 0; left: 0），若没显式声明 top-0 left-0，可能被裁在不可见区域；更常见的是父容器有 overflow-hidden，直接把超出部分切掉。
- 必须手动加
top-0 left-0（或inset-y-0 left-0）锚定位置 - 高度不能靠
h-full：fixed 元素的父容器无高度上下文，h-full会算成 0 - 正确写法是
h-screen或h-[calc(100vh-63px)]（若顶部有固定 header） - 检查 body 或 layout wrapper 是否写了
overflow-hidden，移动端 toggle 时尤其要移除
主内容区如何避开 fixed 侧边栏
fixed 侧边栏不占文档流，主内容不会自动“让位”。用 ml-64 是最直接解法，但要注意场景差异：
- 纯桌面固定布局：直接
ml-64即可 - 响应式中大屏才显示：改用
md:ml-64 lg:ml-72，小屏保持ml-0 - 别用
pl-64：padding 是内部留白，会被子元素 content 撑开，遮盖风险更高 - 主内容区建议加
min-h-screen，否则内容少时右侧背景会露底
滚动侧边栏底部内容被截断怎么办
加了 overflow-y-auto 却滚不到底？问题不在 overflow，而在容器没高度。fixed 元素下 h-full 失效是高频陷阱。
- 导航栏高
h-[63px]→ 侧边栏内容区高度必须写成h-[calc(100vh-63px)] - 避免嵌套
fixed：比如外层div设了hidden，内层再设fixed，会导致父容器仍参与高度计算，撑出多余滚动条 - 移动端抽屉若用
fixed，务必让抽屉容器自身带fixed，而不是包在 static 父容器里 - 内容区加
max-h-[calc(100vh-4rem)]+overflow-y-auto更稳妥（预留 header 高度）
移动端滑入/收起动画总卡顿或失效
用 translate-x 做动画是最稳路径，但几个细节一错就白搭：
- 初始状态必须是
-translate-x-full（不是translate-x-[-100%]），因为 % 依赖父宽，而 fixed 元素父宽常为 auto - 动画必须配
transition-transform duration-300 ease-in-out，只写transition不生效 - 不要混用
hidden和translate：hidden 会中断 transition，导致“闪现” - 桌面端需覆盖动画：用
lg:translate-x-0 lg:transition-none，否则小屏动画逻辑会干扰大屏常驻布局
h-full 这种看似安全的类，在 fixed 上下文中几乎总是错的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
