Make Height occupy the rest size page

[AdrianoFSilva01]

Hello, so as a beginner I'm trying to make a simple website structure and I find the "everyone's problem" with height.
I just want to simply create a sidebar and the main content under a header and I want both to have the rest of the page size, that is, the height of the sidebar and main is the height of the page minus the header size or else simply stretch the both height until they reach the bottom of the page.
I searched for some examples and I just saw solutions that I don't think is the better like for example using a grid, using fixed positions, ... .
Maybe is not that simple that I think but for the layout that I created the only thing left is just the height of both and because of that I need change the whole code(?), need to make a grid or using fixed positions?
As a beginner I don't understand why the solution need to be this or that neither the problem, thats why I came here with a hope that you make me understand why is so "hard" to solve this problem and the better way to fix it.

PS: The Sidebar and Main are fixed, is just a page with those 3 components and sidebar/main have indenpendent scroll

Here is my really simple layout:
https://play.tailwindcss.com/bJd5lxSxVx

So as I said if you could help me understading why I can't put the Sidebar and Main height to the bottom of the page and the better way to fix it I would be appreciated.

Thank you for your attention.

[MartinHughes-BPC]

Hi @AdrianoFSilva01

Here's a play of a layout I've been working on: https://play.tailwindcss.com/eeTkKWQ86V

What I do here is to set the main container to h-screen, then set the children to h-full. The right-hand area is a flex flex-col which contains the "header" and the main content. I then set the main content area to overflow-y-auto so that this area scrolls. The sidebar is also collapsible.

It's not exactly like your layout, but hopefully you can dissect what I did to apply to your case.

[AdrianoFSilva01]

I see what you did its a good and used layout but in that layout you dont have the problem of the height. You just need to say that sidebar has h-screen and its ok, what Im trying to achieve is that, in my and any other layout when you want some component fixed with a height that you dont need/can't define you just want that component to occupy the rest of the page. If someone could awnser what I really want it would be very good for me and some other people Im sure. But thank you for your help!

[MartinHughes-BPC]

Is this more like what you want? https://play.tailwindcss.com/ccssLSqqP4

Here the header is fixed, the sidebar and content area stretch to the bottom of the page, and both sidebar and content areas scroll independently when they overflow. If you remove all the lorem ipsum text you should see that both sidebar and content areas still stretch to the bottom of the page.

Cheers,
Martin.

[AdrianoFSilva01]

Thats exactly what I want. Thank you so much, I really don't understand why I see 1000examples in internet and none of those have what you have! I appreciate you help!