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?É recomendado utilizar a unidade "em" ao invés de "px" para fontes?
httphttps://pt.stackoverflow.com/questions/106962/70