Propiedad height: 100vh;

Css3 agregó medidas relativas de acuerdo al viewport, estas son vh y vw, pero ¿para qué nos sirven estás medidas tan hermosas y desconocidas?

Si queremos hacer que un sección de nuestro sitio web detecte el alto del dispositivo que lo está visualizando y ajuste su alto de acuerdo a esa media, bueno para eso ocuparíamos la medida «vh» en el «height«, ¿no me expliqué? un ejemplo:

[codepen_embed height=»265″ theme_id=»dark» slug_hash=»GrgKzr» default_tab=»html,result» user=»bluuweb»]See the Pen <a href=’http://codepen.io/bluuweb/pen/GrgKzr/’>vh</a> by bluuweb (<a href=’http://codepen.io/bluuweb’>@bluuweb</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

En este ejemplo verás que tenemos una caja <div class=»principal»> y dentro de esta un <h1>, además le agregamos una imagen de fondo, pero esta solo ocupa el alto ocupado por el contenedor.

Podríamos colocar un alto en px y hacer que nuestra imagen se muestre correctamente pero que tal si agregamos la nueva propiedad de Css3 y colocamos height: 100vh;

El resultado sería el siguiente:

[codepen_embed height=»265″ theme_id=»dark» slug_hash=»pRvzXx» default_tab=»html,result» user=»bluuweb»]See the Pen <a href=’http://codepen.io/bluuweb/pen/pRvzXx/’>vh con fondo</a> by bluuweb (<a href=’http://codepen.io/bluuweb’>@bluuweb</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Ahora nuestra imagen está ocupando el alto del dispositivo que este detectando, por lo tanto miles de dolor de cabeza menos y a ocupar como loco esta nueva propiedad de Css3.

Una explicación científica:

vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*

Por el momento no se me ocurre un ejemplo con «vw» ¿sabes de algún ejemplo práctico?

Saludos y buen día!