¿Como dar el ancho o el alto a un div en relación a nuestra pantalla? #html5 #css3

Hace tiempo para poner a un div o a un elemento HTML el tamaño a relación del monitor donde es mostrado teníamos que hacer uso de javascript, pero gracias a CSS3 ahora se puede hacer por medio de 2 nuevas unidades de medida llamadas VH y VW.

VH= su unidad equivale al 1% del alto del tamaño del dispositivo donde se muestra el elemento.

VW= su unidad equivale al 1% del ancho del tamaño del dispositivo donde se muestra el elemento.

De esta manera podemos hacer que un div crezca dependiendo donde es mostrado, por ejemplo si deseamos que se vea al 80% de alto y al 50% de ancho de nuestra pantalla basta hacerlo de la siguiente manera:


<div style="height:80vh;width:50vw;"></div>

Autor: Héctor de León

Desarrollador de software, lector compulsivo.