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?
Your question is confusing. If you want an element to be 100% of the screen height, then .h-screen will do exactly that. A scroll bar appears because you have other elements present, so your document height is greater than the screen height.
If however, you just want the pink element to fill the remaining available space (which is always less than 100% of the screen height), then simply set that element to grow, using the flex property .grow and making that element a child of a .flex element.
…sometimes I cannot change the parent divs classes
Why not?
8