Tailwind CSS中overflow-y搭配top-[63px]无法滚动到底部求助

问题根源 #

你的固定定位侧边栏使用了fixed top-[63px] h-full，此时元素高度等于视口总高度，但顶部向下偏移了63px，导致元素底部会超出视口63px，这部分超出的内容无法通过滚动访问，最终出现“Last Item”无法触达的情况。

解决方案 #

有两种简洁的修复方式，任选其一即可：

方案1：使用bottom-0自动适配高度

直接用top-[63px] bottom-0替代h-full，让元素自动从顶部导航下方延伸至视口底部，无需手动计算高度：

<!-- 左侧小侧边栏 -->
<div class="fixed top-[63px] bottom-0 overflow-y-auto z-20 py-5 px-3 w-16 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
</div>

<!-- 右侧主侧边栏 -->
<div class="overflow-y-auto fixed top-[63px] left-16 bottom-0 z-20 py-5 px-3 w-64 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
  <ul class="w-full"> <!-- 移除多余的overflow-y-auto，避免嵌套滚动 -->
    <!-- 列表内容 -->
  </ul>
</div>

方案2：用calc()计算精确高度

如果需要明确控制高度，可将h-full替换为h-[calc(100vh-63px)]，直接减去顶部导航的高度：

<!-- 左侧小侧边栏 -->
<div class="fixed top-[63px] overflow-y-auto z-20 py-5 px-3 w-16 h-[calc(100vh-63px)] bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
</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="w-full"> <!-- 移除多余的overflow-y-auto -->
    <!-- 列表内容 -->
  </ul>
</div>

额外优化 #

移除内层ul的overflow-y-auto类，避免出现嵌套滚动的冗余行为，外层侧边栏容器的滚动已经足够覆盖所有列表内容。

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst