Para usar medidas em relação à tela, use `vw` e `vh` (veja que o exemplo em amarelo é relativo à tela e não ao espaço ocupado).

Se usar porcentagem, é relativo à div superior. Oo posicionamento dela sendo relativo vincula as descendentes (exemplo em vermelho, 80% da altura  da div amarela).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

    #d2 {
      background:red;
      height:80%;
      width:50%;
    }

<!-- language: lang-html -->

    <div id="d1">
      <div id="d2">
      </div>
    </div>

<!-- end snippet -->