Skip to main content
5 de 5
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/

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>

Para uma comparação entre várias unidades de medida do CSS, veja estes posts:

É recomendado utilizar a unidade "em" ao invés de "px" para fontes?

https://pt.stackoverflow.com/questions/106962/70

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