CSS 当内容滚过视口时背景不可见
CSS background not visible when content scrolls past viewport
我正在尝试创建一个 css 背景，无论内容高度如何，该背景始终为 100% 高度，并且当内容足够长以创建滚动条时，背景颜色会在您滚动时保持不变.
无论我尝试将 min-height 和身高组合成什么样，我似乎都无法正常工作。
当我使用 Tailwind 的 h-screen class 时，当内容小于视口时，它会填充到页面底部，但是当有滚动条时，滚动部分的背景会消失。
我在 parent divs/body/html 上尝试了 h-full 和 min-height: 100% 的各种战斗，但似乎没有任何效果。
这是一个工作示例：
https://jsfiddle.net/t30wo6uk/3/
以下是所演示的两个问题的屏幕截图：
h-screen 在没有滚动条的情况下有效，但一旦有滚动条就会停止：
如果我删除 h-screen 或尝试 height: 100% 的组合，我会遇到相反的问题，滚动时它会卡住，但如果内容对于视口来说太小，背景颜色就不会出现整个页面的高度。
在我的真实应用程序中，我有一个导航 header，然后是我想占据整个高度的这个内容部分，然后是底部的粘性页脚。粘性页脚是我在内容 div.
周围添加额外 div 的原因
将 min-h-screen 添加到 body。这将使 body 至少与视口一样高。然后将 background-color 应用到 body:
<body class="min-h-screen bg-gray-50">
{... content ...}
</body>
如果内容小于视口，min-h-screen 将调整 body 的大小以覆盖整个视口。如果内容较大，内容将决定高度。由于 background-color 应用于 body，它将始终覆盖整个网站。
我正在尝试创建一个 css 背景，无论内容高度如何，该背景始终为 100% 高度，并且当内容足够长以创建滚动条时，背景颜色会在您滚动时保持不变.
无论我尝试将 min-height 和身高组合成什么样，我似乎都无法正常工作。
当我使用 Tailwind 的 h-screen class 时，当内容小于视口时，它会填充到页面底部，但是当有滚动条时，滚动部分的背景会消失。
我在 parent divs/body/html 上尝试了 h-full 和 min-height: 100% 的各种战斗，但似乎没有任何效果。
这是一个工作示例：
https://jsfiddle.net/t30wo6uk/3/
以下是所演示的两个问题的屏幕截图：
h-screen 在没有滚动条的情况下有效，但一旦有滚动条就会停止：
如果我删除 h-screen 或尝试 height: 100% 的组合，我会遇到相反的问题，滚动时它会卡住，但如果内容对于视口来说太小，背景颜色就不会出现整个页面的高度。
在我的真实应用程序中，我有一个导航 header，然后是我想占据整个高度的这个内容部分，然后是底部的粘性页脚。粘性页脚是我在内容 div.
周围添加额外 div 的原因将 min-h-screen 添加到 body。这将使 body 至少与视口一样高。然后将 background-color 应用到 body:
<body class="min-h-screen bg-gray-50">
{... content ...}
</body>
如果内容小于视口，min-h-screen 将调整 body 的大小以覆盖整个视口。如果内容较大，内容将决定高度。由于 background-color 应用于 body，它将始终覆盖整个网站。