Para usar medidas em relação à tela, 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 -->