How to use Viewport Height

There are two ways of dealing with viewport in Framer. You can select a layer and set the position type to Fixed, after which you’ll see a viewport line appear. This will allow you to pin layers relative to the viewport. You can resize the viewport line, but it won’t affect your published layout. Instead, it allows you control how it will appear on canvas. See our feature overview of Fixed and Absolute positioning here.

The second way of designing with Viewport is by using the Viewport Height unit. You can select a layer, and set its height to Viewport. This will default to 100vh, which means it occupies the entirety of the viewport (the height of your browser). This allows you to design landing pages with consistent browsing experiences: you can ensure that the same content (within a single section) is visible on all devices. In short, it gives you control over what appears above and below the fold.