Help - change group sizing dynamically by % instead of px

[thethinklab.au]

Wondering what ideas people have for implementing the following with % instead of px:

Basically, my black group is a column, with ‘space between’ and row gap of 20px.

On a certain condition, I want purple to grow in size to take 100% of the available height, and the first blue group to grow with it.

I have successfully completed this using PX, however, I don’t think this is elegant as it doesn’t cater to all the different screen sizes very nicely…

My purple group has no min/max height, and has ‘fit height to content’ selected.

My blue currently have fixed height px (e.g. 100px each), and I dynamically change the height of the first when the condition is met.

Appreciate any help to make this truly responsive

[rpetribu]

You can do it using CSS!

CSS Viewport Height (vh) minus Pixels (px)

I’m trying to stretch elements to the entire viewport height minus the footer at the bottom. I’ve browsed the forums for a while and I think I’m very close. The solution seems to be to set an HTML with the following code. < style> #list { height: 100vh !important; } < /style> Which successfully stretches the element (element ID = list) to the entire viewport size. Now, I want to subtract a set number of pixels (footer height). What is the code? I’ve tried the following: height: 100vh …