无法滚动到内容容器中的最后一个元素 tailwindcss
Cannot scroll to last element in content container tailwindcss
我想创建一个应用程序布局,它有一个顶部工具栏,里面有一个 div,
然后是侧边栏和内容 window 带有顶部导航
我的结构几乎可以正常工作,但我无法滚动到内容容器的底部。我希望其他一切都得到修复。我已经包含了代码和 fiddle。我感觉这与我放在内容容器上的 h-screen 有关,但如果我尝试 h-full 它根本不会滚动。
<div class="h-screen overflow-hidden" >
<div class="p-4 bg-yellow-500">
<div class="h-10 bg-green-500">
</div>
<div class="h-10 bg-blue-500">
</div>
</div>
<div class="flex">
<div class="w-48">
sidebar
</div>
<div class="w-full bg-indigo-500 p-2 ">
<div class="h-10 bg-orange-500 w-full">
topnav
</div>
<div class=" flex-1 relative z-0 overflow-y-auto bg-green-500 h-screen">
content
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3">Last One</div>
</div>
</div>
</div>
</div>
您 运行 违反了 flexbox 最小尺寸算法,这导致您的布局溢出。详细解释见这个post:
您还受到了 overflow
函数的阻碍,该函数需要固定长度,因此实际上可能会溢出一些东西。看到这个 post:
- Grid with viewport height and inner scrolling div
考虑到这些因素,您只需将此添加到您的代码中:
.main-container {
display: flex;
flex-direction: column;
/* overflow: hidden is not necessary */
}
.secondary-container {
overflow: auto;
}
.tertiary-container {
display: flex;
flex-direction: column;
}
我想创建一个应用程序布局,它有一个顶部工具栏,里面有一个 div,
然后是侧边栏和内容 window 带有顶部导航
我的结构几乎可以正常工作,但我无法滚动到内容容器的底部。我希望其他一切都得到修复。我已经包含了代码和 fiddle。我感觉这与我放在内容容器上的 h-screen 有关,但如果我尝试 h-full 它根本不会滚动。
<div class="h-screen overflow-hidden" >
<div class="p-4 bg-yellow-500">
<div class="h-10 bg-green-500">
</div>
<div class="h-10 bg-blue-500">
</div>
</div>
<div class="flex">
<div class="w-48">
sidebar
</div>
<div class="w-full bg-indigo-500 p-2 ">
<div class="h-10 bg-orange-500 w-full">
topnav
</div>
<div class=" flex-1 relative z-0 overflow-y-auto bg-green-500 h-screen">
content
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3"></div>
<div class="h-10 bg-white m-3">Last One</div>
</div>
</div>
</div>
</div>
您 运行 违反了 flexbox 最小尺寸算法,这导致您的布局溢出。详细解释见这个post:
您还受到了 overflow
函数的阻碍,该函数需要固定长度,因此实际上可能会溢出一些东西。看到这个 post:
- Grid with viewport height and inner scrolling div
考虑到这些因素,您只需将此添加到您的代码中:
.main-container {
display: flex;
flex-direction: column;
/* overflow: hidden is not necessary */
}
.secondary-container {
overflow: auto;
}
.tertiary-container {
display: flex;
flex-direction: column;
}