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 <kbd>página toda</kbd> 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> #d1 { background:yellow; width:50vw; height:80vh; } #d2 { background:red; height:80%; width:50%; } <!-- language: lang-html --> <div id="d1"> <div id="d2"> </div> </div> <!-- end snippet --> Para uma comparação entre várias unidades de medida do CSS, veja estes posts: > https://pt.stackoverflow.com/questions/14217/70 <!-- --> >https://pt.stackoverflow.com/questions/106962/70