当使用 top-[63px] 固定定位侧边栏时，若未显式设置容器高度，overflow-y-auto 无法正确计算可滚动区域，导致底部内容被截断——根本原因是容器缺少基于视口的明确高度约束。
当使用 `top-[63px]` 固定定位侧边栏时，若未显式设置容器高度，`overflow-y-auto` 无法正确计算可滚动区域，导致底部内容被截断——根本原因是容器缺少基于视口的明确高度约束。
在 Tailwind CSS 中实现可完整滚动至底部的固定定位侧边栏，关键不在于滥用 overflow-y-auto，而在于确保滚动容器拥有可计算、不受父级压缩、且适配视口减去顶部占用高度的明确尺寸。你提供的代码中，两个 <div> 均使用了 h-full 和 fixed top-[63px]，但 h-full 在脱离文档流的 fixed 容器中默认解析为 0（因无相对高度上下文），导致 overflow-y-auto 失效——内容虽多，容器却“没有高度”，自然无法触发滚动。
✅ 正确做法：用 calc(100vh - 63px) 精确设定滚动区域高度
h-full 对 fixed 元素无效，必须显式声明高度。由于导航栏高度为 h-[63px]，侧边栏应从 63px 下方开始，并延伸至视口底部：
<aside class="hidden sm:flex" aria-label="Sidebar">
<!-- 第一个窄栏（图标区） -->
<div class="fixed top-[63px] left-0 z-20 w-16 h-[calc(100vh-63px)] overflow-y-auto py-5 px-3 bg-white border-r dark:bg-gray-800 dark:border-gray-700"></div>
<!-- 第二个宽栏（菜单区） -->
<div class="fixed top-[63px] left-16 z-20 w-64 h-[calc(100vh-63px)] overflow-y-auto py-5 px-3 bg-white border-r dark:bg-gray-800 dark:border-gray-700">
<ul class="space-y-2">
<!-- 菜单项保持原结构 -->
<li>
<div class="pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Section A</div>
<ul class="space-y-1">
<li><div class="pl-2 flex cursor-pointer ...">Item 1</div></li>
<li><div class="pl-2 flex cursor-pointer ...">Item 2</div></li>
</ul>
</li>
<!-- 更多项... -->
<li>
<div class="pt-4 pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Section C</div>
<ul class="space-y-1">
<li><div class="pl-2 flex cursor-pointer ...">Last Item</div></li>
</ul>
</li>
</ul>
</div>
</aside>? 为什么 h-[calc(100vh-63px)] 是最优解？
- 100vh 提供绝对视口基准，-63px 精确扣除顶部导航栏高度；
- 直接作用于滚动容器自身，无需依赖父容器高度或 CSS 选择器（如 :nth-child(2)），语义清晰、可维护性强；
- 兼容所有现代浏览器（Chrome/Firefox/Safari/Edge），包括 iOS Safari 的 touch-scroll 惯性行为。
⚠️ 常见误区与避坑指南
- ❌ 避免 min-h-full 或 h-auto：它们无法触发溢出逻辑，min-h-full 仅设最小高度，h-auto 让容器随内容无限撑高；
- ❌ 慎用嵌套 overflow-y-auto：示例中 <ul class="overflow-y-auto w-full"> 是冗余的——外层 div 已承担滚动职责，内层 ul 应专注布局，否则可能引发滚动冲突或事件捕获异常；
- ❌ 勿混用 resize、inset-* 与 overflow-*：某些组合会隐式重置 overflow 行为（如 inset-0 可能覆盖 top/left 并干扰高度计算）；
- ✅ 移动端增强建议：为提升 iOS Safari 滚动流畅度，可添加 scroll-smooth 或 touch-action: pan-y：
<div class="fixed top-[63px] left-16 ... scroll-smooth" style="touch-action: pan-y;">
? 滚动条样式（可选增强）
默认滚动条在 macOS/iOS 上隐藏，如需常驻可见，需启用 Tailwind 的 @tailwindcss/scrollbar 插件，并添加类：
立即学习“前端免费学习笔记（深入）”；
<div class="h-[calc(100vh-63px)] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
? 总结：overflow-y-auto 本身无错，错的是容器缺失「可测量的高度边界」。固定定位组件必须用 calc(100vh - Xpx) 显式定义高度，这是 Tailwind 中实现可靠垂直滚动的黄金法则。
