To center a child container vertically in the viewport I set the parent section to 100VH.
But now I have a NavBar which takes up part of the viewport. How do I make a section under the navbar fill the remaining viewport so I can vertically center a child inside that section?
I believe the navbar is fixed 50 px high, so my section needs to be 100VH-50px but the height field does not accept formulas!
Strangely, when I set the empty section’s height to Auto it fills the remaining viewport just as I want it to, but as soon as I drop a child container into that section the auto height is reduced to the child container’s height.
What I thought should work is setting the body to 100vh, inserting the navbar and a 100%high section, but the body ends up being extended by the navbar’s height. So the body height setting of 100VH is actually ignored as I end up with a scroll bar, see http://js-design.webflow.io/test-page
Why don’t you put the navbar inside of the section, as a position:absolute element stuck to the top? This way the section will be 100vh and the navbar won’t account any of its height, so whatever you vertically center inside of it will be truly centered.
FYI it’s been said recently by Vlad that WF field will one day accept CALC.
I’d suggest to do it like so:
Create a wrapper div with the 100 vh viewport hight and make it flex vertical. Then create two dogs, one for the nav and one for the remaining space. Set the div for the nav to display block and hight to the you need. Then set the hight of the div for the remaining space to 100%, there you go. The div for the remaining space can contain whatever you like in a layout you wish.
