Streaming live at 10am (PST)

Vertical Height 100%


#1

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.


#2

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.


#3

hi vincent,

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


#4

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


#5

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


#6

Here are two article that may help you:

https://css-tricks.com/viewport-sized-typography/
http://www.w3schools.com/cssref/css_units.asp


#7

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.


#8

@PixelGeek & @vincent

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

Thanks Again,
SeanK


#9

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


#10

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

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


#11