Hi!
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!
/Kaj
Hi,
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.
Thanks
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.
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.