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!