Streaming live at 10am (PST)

How to fill remaining viewport if there is a navbar?


#1

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


#2

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.


#4

Thank you for your suggestion, Vincent!
But I want to center the child in the remaining viewport height (sans navbar).


#5

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.


#6

I tried that. The 100% height for the second child takes up the entire parent section ignoring the height taken by the navbar. :frowning:


#7

make your 100vh section a flexbox

inside put 2 elements, your navbar on one div

set the flexbox to vertical

select the navbar and set the options for flex child to “don’t shrink”

set the flex like this:

now set the div to take up the remaning space (height 100%)

now make this div flexbox too, with centered options

put the content in the div


#8

Hi sibir,
i made a playground for your issue:
https://preview.webflow.com/preview/playground-f976c3?preview=f5fe4a3a4a1e72e4c5e732603ff48ecf

Maybe that describes the solution a bit better.


#9

That looks like a workable solution, thank you!


#10

Thank you, I think I got it!