所有内容背后的 TailwindCSS background-color

TailwindCSS background-color behind all content

我正在尝试设计一个具有固定背景颜色的页面，但我遇到了一些困难。

我有一个 parent 容器，它使用 min-h-screen 设置高度并分配背景颜色。我的内部 child 不是 parent 的固有高度，因此该行为已关闭。我可以通过在 parent 中使用 h-screen 来解决这个问题，但是 child 中的任何溢出内容都不在后台。

我想到了一些解决方案，一些使用 flexbox，另一个使用 overflow-scroll，但其中 none 感觉是正确的解决方案。我很好奇是否有人可以指出解决此问题的正确方法？

这是不良行为的示例：

我创建了一个顺风游乐场来展示这里的行为：https://play.tailwindcss.com/psM22NgfLj

在顶层容器上，您有 min-h-screen，这意味着容器应始终至少与视口一样高。您还有 h-0 这没有帮助。第一步是删除固定高度。通过将高度设置为 0，容器被固定为不大于屏幕高度，从而影响您的滚动行为。

接下来，删除所有出现的 h-full。

第一个子容器 bg-gray-800 被设置为 h-full 所以我的假设是您希望它也至少是全高。在 top-level 容器上设置 flex。

更新：根据您的反馈，我已将 third-level 内容容器设置为至少占据页面高度的剩余部分。

这是通过将 flex 应用于 bg-gray-800 容器，将方向更改为列，并将 flex-1 放在需要扩展以填充剩余高度的内容上来完成的。