CSS，响应式DIV

Question

我试图实现类似的目标：

1，你必须知道它应该是全屏的，这就是我使用％的原因。

到目前为止，无论屏幕的宽度是多少，我都只能让视频保持16：9。我也能够创建两个较轻的蓝调div，但它们不能自动适应视频和页脚之间的空间。

我也制作了红色的div。

现在我想知道如何让小蓝色div适合空间，因为现在它们根本没有出现，显示它们的唯一方法是设置一个固定的高点，这不是我和＃39;我正在寻找。另外我想知道如何制作宽度屏幕的第二个数字。

这是我的代码：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-box。如果你给所有蓝色容器一个容器，并从1 flex-direction: column;改为2 flex-direction: row;并为浅蓝色容器添加一个容器，并改变你所需布局的对立方式。