当内容滚动经过视口时，CSS 背景不可见

Question

我正在尝试创建一个始终为 100% 高度的 css 背景，无论内容高度如何，并且当内容足够长以创建滚动条时，背景颜色会在您滚动时保持不变。

无论我尝试如何组合最小高度和高度，我似乎都无法使其正常工作。

当我使用 Tailwind 的

h-screen

类时，当内容小于视口时，它会填充到页面底部，但是当有滚动条时，背景会在滚动部分消失。

我在父 div/body/html 上尝试了

h-full

和

min-height: 100%

的各种战斗，但似乎没有任何效果。

这是一个工作示例：

这是演示的两个问题的屏幕截图：

h-screen

在没有滚动条时有效，但一旦有滚动条就会被切断：

如果我删除

h-screen

或尝试

height: 100%

的组合，我会遇到滚动时粘住的反向问题，但如果内容对于视口来说太小，则背景颜色不会占据页面的整个高度。

在我的真实应用程序中，我有一个导航标题，然后是我想要占据整个高度的内容部分，然后是底部的粘性页脚。粘性页脚就是为什么我在内容 div 周围有这些额外的 div 的原因。

Answer 1

将

min-h-screen

添加到正文。这将使主体至少与视口一样高。然后将背景颜色应用到正文：

<body class="min-h-screen bg-gray-50">
{... content ...}
</body>

如果内容小于视口，

min-h-screen

将调整正文大小以覆盖整个视口。如果内容较大，则内容决定高度。由于背景颜色应用于正文，因此它将始终覆盖整个网站。

Answer 2

我最近在自己应用 Tailwind 时遇到了同样的问题。对于仍在寻找答案的人来说，

min-h-full

似乎效果很好。