Is there a way to expand this div to 100% of the screen without the scrollbar to appear?

I have this html and tailwindcss code:

<div class="flex flex-col min-h-screen">
    <div class="bg-black text-white h-[65px]">
        This is a navbar, but 65px is just an example, the height is dynamic on each page
    </div>

    <div class="bg-blue-200 flex-1">
        Body here

        <div class="bg-pink-300">
            I would like this to be 100% height of the screen but without the need to scroll the page. If I use `h-screen` the scroll appears.
        </div>
    </div>

    <div class="bg-black text-white h-[65px]">
        This is a footer, but 65px is just an example, the height is dynamic on each page
    </div>
</div>

Ideally if dinamically the navbar or the footer change their height the height should change accordingly.

I can fix this using flex flex-col flex-1 on the parents divs.

But in some pages I can’t. Because sometimes I cannot change the parent divs classes.

Obviously I’m not looking for a Javascript solution.

Can you help me?

You need to sign in to view this answers