VW e VH: Unidades de medida para CSS matadoras

Você tem um elemento, um modal para captura de email, por exemplo. Precisa que ele ocupe a tela inteira, como você faria?

Até algum tempo atrás a solução seria pegar a altura e largura por JavaScript e inserir via atributo style no elemento. Mas sabemos que não é nada legal usar JavaScript para estilizar, você acabaria tendo que chamar a função para montar essa estrutura em mais de um evento, normalmente no load e no resize, mas no fim funcionaria.

Mas hoje essa não é a unica solução, no futuro nem será uma solução, espero. Hoje apresento duas unidades de medida que são simplesmente matadoras!

VH ou Viewport Height

VH é a medida usada na altura, no height do CSS. Funciona por porcentagem, por exemplo:

Esse exemplo acima vai deixar o elemento #modal com 100% da altura da janela. Lembrando que não precisa usar %, só mesmo usar vh no final da porcentagem.

VW ou Viewport Width

VW é a medida usada na largura, no width do CSS. Assim como o VH, funciona por porcentagem, vejamos um exemplo abaixo:

Esse exemplo acima vai deixar o elemento #modal com 100% da altura da janela. Assim como o VH, não precisa usar %.

Antes de terminar o post, queria agradecer ao Willow, da Brasa, que me deu essa dica e também mostrar minha reação ao conhecer essas unidades 😄