Skip to main content
3 de 5
adicionou 11 caracteres ao conteúdo
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Para usar medidas em relação à área exibida, use vw e vh.

Veja que o exemplo em amarelo é relativo à àrea do quadro (viewport width e viewport height).

Clique em página toda logo no canto do snippet e compare.

Se usar porcentagem, o elemento é relativo à div superior, desde que o posicionamento dela e da superior não sejam fixo ou absoluto (a interna pode até pode ter posição absoluta). É o exemplo em vermelho, 80% da altura da div amarela, e metade da largura.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

Largato
  • 92,9mil
  • 18
  • 190
  • 261