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:

#modal{
position:absolute;
height:100vh;
}

view raw
gistfile1.css
hosted with ❤ by GitHub

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:

#modal{
position:absolute;
width:100vw;
}

view raw
gistfile1.css
hosted with ❤ by GitHub

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 ?

4 thoughts on “VW e VH: Unidades de medida para CSS matadoras

    • Diego Rojas Autor do postResponder

      “Sim, é possível.
      Porém, é preciso adicionar um scroll (com overflow) no elemento que estiver em volta.” – Everaldo Matias

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *