Vertical Height 100%

Toby · September 9, 2015, 7:13am

Hi,

i’ve just tried to add a easy div and give them 100% landscape and 100% vertical height.
Landscape works, but the vertical height 100% not. Now i found that its possible to reset
the % and change it to “VH”. change the % into vh.

vincent · September 9, 2015, 9:28am

100VH should just work as expected. If you want to use %, you also have to give the Body element 100%, unless nothing will take up 100% of the height.

Toby · September 9, 2015, 9:40am

hi vincent,

thanks for this tip. the body is a little bit holy for me.

vincent · September 9, 2015, 11:25am

Don’t be afraid of it, just avoid giving it overflow:hidden, also don’t feed it after midnight

seank · September 9, 2015, 2:04pm

What is VH? I am familiar with pixels, inches etc.

PixelGeek · September 9, 2015, 2:21pm

Here are two article that may help you:

vincent · September 9, 2015, 2:33pm

It’s percentage of the viewport. Very handy because you don’t have to set the body at 100% to get 100% height on anything. Also very handy for text size that depends on the brwoser height or width.

seank · September 9, 2015, 3:23pm

@PixelGeek & @vincent

Thank you guys. I now know about VH, VW, etc. Love how CSS is advancing.

Thanks Again,
SeanK

Stephanie · November 4, 2015, 2:53am

VH? where is it - i cant see VH on my webflow dashboard
thnx

vincent · November 4, 2015, 8:37am

It’s not by default, but TYPE IT IN. Like “100 VH” then Enter, then you’ll see WF takes it.

http://vincent.polenordstudio.fr/snap/100vh.gif

That’s how awesome Webflow is. It does more than it’s programmed to, because it sticks to HTML/CSS basics.