Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Nov 19, 2020

Viewport height minus header


Does anyone know of a way to make a section the height of the viewport minus the header? Right now I've made the header as a regular container for the pages where I want an object or section to cover the entire viewport, but it would be nice if the calculation of grid sizes could handle minus. Because it can't, right?

Thank you!




You should be able to use the calculation on the grid row to define a viewport minus header height.

When you click on the calculation unit for the grid row enter (100vh - header).

Make sure to use the parenthesis.

Tip: Leave the height of the section/container at auto.

Please let us know if you are still having issues.


Nov 19, 2020

Worked almost perfectly! I had missed the parenthesis before. I couldn't get it to understand "-header", but I had a fixed header height so it worked out.

Nov 30, 2020

Hi! sorry for commenting so late –well it's still November so i dared– but as an additional sugestion to the calculation form the Team's Product Manager offered, you can approach a similar solution if your header's fixed; by marking the option 'Top of next section' in the scroll properties (Inspector Panel) of your header, and then making your section the height of the viewport (100vh).

This way your header covers the section and you don't need to do the calculation.

Though you'd just have to make sure the area of the section covered by the header is empty or doesn't contain anything important; or may not be the best approach if you don't want your header to be fixed.

Editor X

Design your boldest creations.