当使用 top-[63px] 定位侧边栏时，若未设置明确高度，overflow-y-auto 无法触发完整滚动；核心解法是为容器显式指定基于视口减去头部高度的可用高度（如 h-[calc(100vh-63px)]），而非依赖 h-full。
当使用 `top-[63px]` 定位侧边栏时，若未设置明确高度，`overflow-y-auto` 无法触发完整滚动；核心解法是为容器显式指定基于视口减去头部高度的可用高度（如 `h-[calc(100vh-63px)]`），而非依赖 `h-full`。
在 Tailwind CSS 中实现一个固定顶部导航栏 + 可滚动侧边栏的布局时，常见误区是仅依赖 fixed 定位与 overflow-y-auto，却忽略了一个关键前提：overflow 类生效的前提是容器必须拥有可计算、有边界的显式高度。h-full 在 fixed 上下文中往往失效——因为它继承的是父容器高度，而 fixed 元素已脱离文档流，其父容器（如 <div class="hidden sm:flex h-full">）本身可能无明确高度约束，导致 h-full 计算结果为 0 或 auto，最终使 overflow-y-auto 形同虚设，底部内容被截断。
✅ 正确做法：用 h-[calc(100vh-63px)] 替代 h-full
将原代码中第二个 <div>（即主侧边栏内容区）的高度从 h-full 改为基于视口的动态计算高度：
<!-- ❌ 错误：h-full 在 fixed 容器中不可靠 -->
<div class="overflow-y-auto fixed top-[63px] left-16 z-20 py-5 px-3 w-64 h-full bg-white ...">
<!-- 内容 -->
</div>
<!-- ✅ 正确：显式定义可用高度 -->
<div class="overflow-y-auto fixed top-[63px] left-16 z-20 py-5 px-3 w-64 h-[calc(100vh-63px)] bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<ul class="overflow-y-auto w-full">
<!-- 大量列表项 -->
</ul>
</div>? 提示：63px 必须与导航栏 h-[63px] 高度严格一致。若导航栏高度响应式变化（如 sm:h-[72px]），则需配合 sm:h-[calc(100vh-72px)] 或使用 CSS 自定义属性提升可维护性。
⚠️ 其他关键注意事项
-
避免嵌套 overflow-y-auto：外层 <div> 已设 overflow-y-auto，内部 <ul class="overflow-y-auto w-full"> 是冗余且有害的——它会创建双层滚动容器，干扰滚动行为并可能导致最后一项不可见。应移除内层 overflow-y-auto。
立即学习“前端免费学习笔记（深入）”；
慎用 h-full / min-h-full：它们在 fixed 或 absolute 定位元素中不保证实际高度，尤其当父级未设高度时。始终优先使用 h-[calc(100vh-Xpx)] 或 max-h-[calc(100vh-Xpx)]。
-
移动端兼容性增强：iOS Safari 对 fixed + overflow 组合支持较弱，建议添加 scroll-behavior: smooth 和 touch-action: pan-y 提升体验：
<div class="overflow-y-auto fixed top-[63px] left-16 ... [scroll-behavior:smooth] [touch-action:pan-y]">
-
滚动条可见性（可选）：如需强制显示滚动条（尤其 macOS/iOS 默认隐藏），启用 Tailwind 的 @tailwindcss/scrollbar 插件后，可添加：
<div class="... scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-track-gray-800 dark:scrollbar-thumb-gray-600">
✅ 最终精简结构示例
<body class="overflow-hidden">
<nav class="fixed top-0 left-0 right-0 z-20 h-[63px] bg-white border-b border-gray-200"></nav>
<!-- 主侧边栏：精确高度 + 单层 overflow -->
<div class="fixed top-[63px] left-0 z-10 w-16 h-[calc(100vh-63px)] bg-white border-r border-gray-200 overflow-y-auto">
<!-- 图标导航 -->
</div>
<div class="fixed top-[63px] left-16 z-10 w-64 h-[calc(100vh-63px)] bg-white border-r border-gray-200 overflow-y-auto">
<ul class="p-5 space-y-4">
<li><span class="text-gray-500 uppercase text-sm">Section 1</span></li>
<li class="pl-2 font-medium text-gray-600 cursor-pointer">Item 1</li>
<li class="pl-2 font-medium text-gray-600 cursor-pointer">Item 2</li>
<!-- ... -->
<li class="pl-2 font-medium text-gray-600 cursor-pointer">Last Item</li>
</ul>
</div>
</body>✅ 总结：overflow-y-auto 不是“魔法开关”，而是“条件触发器”——只有当容器真实存在高度边界且内容物理溢出该边界时，滚动才生效。用 calc(100vh - Xpx) 显式定义高度，是从根源上解决固定定位侧边栏滚动截断问题的最可靠方案。
