Crear un div que ocupe el 100% de la ventana de tu navegador

Puedes crear un div que ocupe un porcentaje concreto de tu pantalla tanto a lo ancho como a lo alto o bien el 100% de ella. Para hacer esto tienes que hacer uso de la regla width para establecer una anchura y height para establecer una altura pero a diferencia de utilizar una medida con un porcentaje o unos píxeles, vas a utilizar la unidad vh para la altura (height) y la unidad vw para la anchura (width).

Es decir, si a un elemento le ponemos un width: 100vw le estamos indicando que ocupe el 100% del viewport de tu navegador en cuanto a medida de anchura. Si usamos un height: 100vh le estaremos diciendo que ocupe el 100% de altura del viewport de tu navegador.

La diferencia de usar las unidades vw y vh en vez del porcentaje es que el porcentaje dependerá del contenedor. Si a un elemento le ponemos un width: 100% y un height:100% pero el contenedor ocupa 500px de ancho, el contenido ocupará el 100% de 500px que serán 500px pero no ocupará el 100% de tu resolución de pantalla, el viewport de tu navegador. Una medida muy útil por si queremos mostrar siempre la misma proporción de tamaño de un elemento.

Realmente, el significado de vh es viewport header mientras que el significado de vw es viewport width.