Adding 100vh or 100% height in figma sites

There is actually a way to do this, but it’s not intuitive at all — Figma should fix this urgently.

Let’s go. Using Figma Sites, from what I’ve noticed, by default all created elements are rendered inside a div with the ID #container. So, if this isn’t something consistent, everything I wrote below can be disregarded.

In order to use sizes relative to the viewport, we need to write a few lines of basic CSS code.

 The Simple Way:

<style>#container{min-height:100vh;}</style>

The preview:
 

This is just a basic demonstration. You can also add classes to elements by editing the TSX component and inserting similar CSS code to define the height. This way, only an inner section will have a height of 100vh. But it takes a bit more work to create the demonstration/screenshots.

Something like: 

<style>.l-heroSection{min-height:100vh;}</style>

The point is: yes, it can be done, but come on @Figma — you could make this simpler, right?

This is something so common in real projects that it’s surprising it isn’t available in such a popular software.

Hello,

I am looking to create a good hero section for my site, where it should take the height of browser in the first fold. The subsequent sections can be of fixed heights based on content. 

I need something like 100vh to have for my hero section.

There is actually a way to do this, but it’s not intuitive at all — Figma should fix this urgently.

Let’s go. Using Figma Sites, from what I’ve noticed, by default all created elements are rendered inside a div with the ID #container. So, if this isn’t something consistent, everything I wrote below can be disregarded.

In order to use sizes relative to the viewport, we need to write a few lines of basic CSS code.

 The Simple Way:

<style>#container{min-height:100vh;}</style>

The preview:
 

This is just a basic demonstration. You can also add classes to elements by editing the TSX component and inserting similar CSS code to define the height. This way, only an inner section will have a height of 100vh. But it takes a bit more work to create the demonstration/screenshots.

Something like: 

<style>.l-heroSection{min-height:100vh;}</style>

The point is: yes, it can be done, but come on @Figma — you could make this simpler, right?

This is something so common in real projects that it’s surprising it isn’t available in such a popular software.

Is there a way you can explain better?

how do I know the IDs of different sections, or does it take the name of the frame?