Struggling with dynamic / responsive height

I am pretty new to Bubble, though not new to dev stuff in general.
I have a desktop application (using WPF) which I am trying to convert into a web application.

I want a header and a footer floating at the top and bottom - that stuff is sorted, I’ve done that. Next, the rest of the pages content should fill the remaining space. I have found people suggesting setting the height to 100VW using some JS plugins etc, however I don’t think this would totally solve my end goal. I want to then have more content at the top, and other things which again, fill the remaining space. As an example, Here is a modified screenshot from my application. Red boxes show normal containers, whilst green boxes show elements which are trying to fill the remaining space.

So, both the green boxes will expand to fill in the remaining space. Obviously I’m not trying to replicate the entire thing 1 for one, so the UI for filtering things, etc will all be much more appropriate for web… But both of those green boxes need to expand to meet the current height of the viewport, without creating a global scrollbar for the entire page (a scroll bar for the repeating group obviously, but not the entire page).

How should I go about tackling this?