Is it possible to have a row dynamically fill the remaining height of the window?

EX: I have a row (or rows) of content but would like to add another row that would dynamically resize to fill the remaining space on a page? Ideally be able to add a background color to that row, dynamically updates when resizing the window, and perhaps have multiple rows like this with different percentages? (EX: Row 2 fill remaining 20%, Row 3 fill remaining 70%).

Not sure if this would be adding custom code (HTML, CSS, JS) and an id, or perhaps there is an existing element that could mimic this behavior? I poked around a bit at elements and flexbox CSS but could not achieve this. I did try using the full height row toggle on rows, but this only seemed to work when it was the only row on a page, otherwise it just added a row with the full height of the window creating a longer scrolling window.

Thanks for any tips on this!

Hi,

was there a solution for this because I have the same question

Page has 3 rows and want the middle one to take the remaining place and if possible set it that it have a minimum height.

Thanks Filip