100vh or 100% height of a container and the editor

Ok so this is probably obvious but it just send me round the twist for a while…

and I wanted to check this correct

Say you have a web page with three sections, you want each of those three sections to individually fill the viewport height - 100vh

To do this set the main page container to column

Create a group to hold the other groups, set this to column - and don’t set and heights etc

Drop in a Group 1 - set this groups min height to 100%, and set the ‘collapse when hidden’ (this is important or you’ll go mad trying to find them as the page adjust in the editor) . also ensure you DONT select ‘fit to content’ or this breaks it.

copy and paste the groups (to save time) , one after the other - Group 1, Group 2, Group 3.

When you want to see and modify each of the three groups you have to turn off the visibility in the elements tree.

I’ve found some other strange behaviour but this is so far how I’ve managed to make this work.

I hope it’s helpful to someone.


Something else that I have found is if you put other groups outside of the main group container with different heights it can really screw up your 100vh (100% height) groups… so if in doubt move them inside the main container.

I did this with a footer and it just didnt work and I couldn’t figure out exactly why… so I made it a reusable and just duplicated it in the the child groups.

This method works great for repeating group as well. Thanks!

1 Like