Search

design

start

design

scroll

design

navigation

design

effects

design

cms

design

localization

design

insert

design

templates

design

management

design

integrations

design

code

design

courses

Viewport Height

How to use Viewport Height

How to use Viewport Height

Design expressive pages with sections that adapt to the height of the browser.

Intermediate

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.