英文:
Div height and overflow in nested layout to achieve scrollable child elements
问题
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
英文:
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案1
得分: 0
让我们看一下第二个导航栏下的容器（蓝色父容器）。它的父容器（也是第二个导航栏的父容器）的高度约为831像素。导航栏的高度为3rem，约为48像素。
但是蓝色父容器的高度为100%（相对于其父容器），约为831像素。所以它实际上溢出了（因为831+48不等于831）。
如果在蓝色父容器上添加overflow:hidden，它将隐藏溢出的部分，蓝色容器将正常滚动。
https://play.tailwindcss.com/SOO2rwiGsw
英文:
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年2月14日 08:54:32
- 转载请务必保留本文链接：https://go.coder-hub.com/75442537.html
- css
- tailwind-css
评论