Menu
I'm trying to create a css background that is 100% height at all times regardless of content height, and when the content is long enough to create a scrollbar, the background color remains as you scroll.
No matter what combination of min-height & height I try I can't seem to get this to work properly.
When I use Tailwind's h-screen class it fills to the bottom of the page when the content is smaller than the viewport, but when there's a scrollbar the background disappears on the scrolled section.
I've tried various combations of h-full and min-height: 100%, on parent divs/body/html, but nothing seems to work.
Here's a working example:
https://jsfiddle.net/t30wo6uk/3/
Here's screenshots of the two problems demonstrated:
h-screen works when there's no scrollbar, but once there's a scroll it cuts off:
If I remove h-screen or try combinations of height: 100% I get the inverse problem where it sticks when scrolling, but if the content is too small for the viewport the background color doesn't take up the full height of the page.
In my real app, I have a navigation header, then this content section that I want to take up the full height, and then a sticky footer at the bottom. The sticky footer is why I have those additional divs around my content div.
408
asked Oct 27 '25 14:10
Add min-h-screen to the body. that will make the body at least as heigh as the viewport. Then apply the background-color to the body:
<body class="min-h-screen bg-gray-50">
{... content ...}
</body>
if the content is smaller then the viewport, min-h-screen will size the body to cover the entire viewport. If the content is larger, the content will determine the height. As the background-color is applied to the body, it will always cover the entire website.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
