Adding 100vh or 100% height in figma sites

You can set an element to be fit the height or width of its parent container, but I do not think Figma provides any hook to set elements to the size of the user’s viewport (width or height). In your context, try adding auto-layout to a container and set the elements’ width/height to “fill container”. This might be a decent enough solution for you.

I have an issue where I often work in Figma with 2560x1440 resolution, but when I demo work I adjust my resolution to 1920x1080 to make it easier to review over screenshare. So I have to set the size of elements on the page based on the resolution I intend to demo at because there is no dynamic scaling based on the user’s viewport.

I’d love to be wrong on this point, so if I’m missing something please anyone share.

Any update on this ?
Crazy that it is not already implement on Sites.

Any updates on this? We need this bad.

Any updates?  It should be day 1 thing, guys….

Any updates on this? We need this :(

Currently, I still think this is such a quality of life update for everyone. I find myself looking for this feature frequently and the fact that Framer has this but Figma site does not...Please implement this

Really need this update. Without it unfortunately we’ll have to use a different solution for our landing page use case. It’s crucial to be able to fill the users browser window full to achieve the design effect we’re going for.

Any updates on this?

We still need this

😴 still waiting

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.