HTML CSS，在％高度div内安装两个div

Question

我有一个父div，其定义高度（80％）和宽度（100％）， 它包含两个div：

• 第一个必须始终保持16：9的比例，现在还可以。因此，如果我更改屏幕的宽度，则会更改div的高度（以保持比率）
• 第二个必须符合16：9＆lt; div＆div; div和剩余的父div之间的高度。

我尝试了很多东西，但我无法弄清楚如何制作它。

请查看以下codepen：http://codepen.io/anon/pen/KNMBGO

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 640px;
  width: 360px;
}
div {
  border: 1px solid grey;
}
#pbzone {
  height: 80%;
  background-color: pink;
}
#ppzone {
  float: left;
  width: 100%;
  display: flex;
  background-color: green;
  height: 20%;
}
#pgzone {
  padding-top: 56.25%;
  background-color: black;
  background-size: cover;
  border: 0px;
  !important
}

＆＃13;

<div id="pbzone">
  <!--  -->

  <div id="pgzone">
    <!-- Always stay at a 16:9 ratio -->
  </div>

  <div id="ppzone">
    <!-- Must fit the visible part of the pink Div (so pink-black height) -->
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;