Hi Everyone! I’m trying to make a design that needs at least, to have a height of 100vh. Fixed height header and footer, and content in the middle. Content height of calc(100vh - header - footer) seems not to work well in the studio. Any idea of how to achive this?
more precisely, I need the content in the middle of header and footer to be as heigh as the remaining height of the view port
This is actually quite simple, but admittedly not that obvious. The trick is to create a wrapping stack, set to a height of 100vh. Then, just set your content section height to Stretch.
You may also want to turn that wrapping stack into a component and set it as the default page wrapper, so that it gets added by default when creating a new page.
Actually, if you go the component way, inside the component, your root Page Wrapper stack doesn’t need a 100vh height - you can leave it auto/unset.
Then, in the page, set the height of the page template component itself to 100vh.
great
Testing it Andrei, thank you in advance
works perfectly. Thank you very much