CSS、応答性のDIV

Question

私はそのような何かを達成しようとしている：

第一は、私は％を使用する理由です、それはフルスクリーンでなければなりません知っている必要があります。

これまでのところ、画面の幅に関係なく、ビデオを16：9のままにすることができました。私は2つの明るいブルーのdivを作成することもできましたが、ビデオとフッターの間のスペースに自動的には適合しません。

私も赤いdivを作っています。

今私は小さな青いdivsをスペースに合わせることができるのだろうかと疑問に思っています。なぜなら、今はまったく表示されていないし、それらを表示する唯一の方法は固定高を設定することです、探しています。また、私は幅の画面のために、どのように2番目の数字を作ることができるのだろうか。 http://codepen.io/EzhnoFR/pen/KNMBGO

<div id="aszone"> 
</div> 

<div id="pbzone"> 

     <div id="pgzone"> 
      <video width="100%" preload="none" autoplay="true"> 
     <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
      <source type="video/mp4" src="http://brunotarhan.fr/intro.mp4" /> 

     </div> 

     <div id="ppzone"> 

      <div id="pp1"> 
      </div> 

      <div id="pp2"> 
      </div> 

     </div> 

</div> 

<div id="gzone"> 
</div> 

html, body { 
    margin: 0; 
    padding: 0; 
} 

div{ 
    border: 0px solid black; 
} 

video{ 
    width:100%; !important; 
} 

#aszone, #gzone{ 
    height: 10%; 
    background-color: grey; 
    background-size: cover; 

} 

#gzone{ 
    height: 10%; 
    bottom: 0; 
    position:absolute; 
} 

#pbzone{ 
    height: 50%; 
    position: relative; 

} 

#ppzone{ 
    float: left; 
    width: 100%; 
    height: 50%; 
} 

#pp1{ 
    width: 50%; 
    height: 150px; 
    float: left; 
    background-color: red; 
} 

#pp2{ 
    width: 50%; 
    height: 150px; 
    float:right; 
    background-color: yellow; 
} 

#pgzone{ 

    background-image: url(screenfiles/bg.jpg); 
    background-size: cover; 
    border: 0px; !important 
} 

Answer 1

使用するFlex-ボックス：

は、ここに私のコードです。青色のものにすべてコンテナを入れて、1 flex-direction: column;から2 flex-direction: row;に変更し、明るい青色のコンテナを追加して、希望のレイアウトになるように反対に変更します。