我遇到了一个问题，我的Tailwind CSS代码似乎阻止我滚动到一个aside元素的底部.
<body>
<div>
<nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b border-gray-200 dark:border-gray-600 h-[63px]">
</nav>
<aside class="hidden sm:flex h-full " aria-label="Sidebar">
<div class="">
<div class="fixed top-[63px] overflow-y-auto z-20 py-5 px-3 w-16 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
</div>
</div>
<div class="overflow-y-auto fixed top-[63px] left-16 z-20 py-5 px-3 w-64 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<ul class="overflow-y-auto w-full">
<li>
<div class=" pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
</ul>
</li>
<!-- More items -->
<li>
<div class=" pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
</ul>
</li>
<li>
<div class="pt-4 pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Last Item</div>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="sm:pl-16 pt-[63px]">
here
</div>
</div>
</div>
</body>
Issue Explanation:个
我正在使用TailWind的CSS类(top-[63px]、overflow-y-auto等)来设置side元素的样式，希望它成为一个可滚动的侧边栏.然而，似乎顶部-[63px]样式导致滚动在到达边栏底部之前停止，留下一些内容无法访问.在这种情况下，当<li>个人太多时为<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Last Item</div>人
这里有一个codepen:
https://codepen.io/Corbin/pen/vYPEeVB个
我会感激任何见解，建议，或替代的方法，以实现可滚动一边，同时保持所需的布局.