Html CSS，响应DIVs

我正在努力实现这样的目标：

首先你必须知道它应该是全屏的，这就是为什么我使用%的原因

到目前为止，无论屏幕的宽度如何，我只能让视频保持16:9。我还能够创建两个较轻的蓝色div，但它们不能自动适应视频和页脚之间的空间

我还做了红色的div

现在我想知道我如何才能使蓝色的小div适合这个空间，因为现在它们根本没有出现，展示它们的唯一方法是设定一个固定的高度，这不是我想要的。我还想知道如何制作宽屏幕的第二个图形

这是我的密码：

html，正文{
保证金：0；
填充：0；
}
div{
边框：0px纯黑；
}
录像带{
宽度：100%；！重要；
}
#aszone，#gzone{
身高：10%；
背景颜色：灰色；
背景尺寸：封面；
}
#gzone{
身高：10%；
底部：0；
位置：绝对位置；
}
#pbzone{
身高：50%；
位置：相对位置；
}
#ppzone{
浮动：左；
宽度：100%；
身高：50%；
}
#pp1{
宽度：50%；
高度：150像素；
浮动：左；
背景色：红色；
}
#pp2{
宽度：50%；
高度：150像素；
浮动：对；
背景颜色：黄色；
}
#pgzone{
背景图片：url（screenfiles/bg.jpg）；
背景尺寸：封面；
边框：0px；！重要
}

使用Flex box。如果给所有蓝色的一个容器，并从1

flex-direction:column更改至2<代码>弹性方向：行并为浅蓝色的添加一个容器，并更改您所需布局的相反方式。
发布一些代码，而不仅仅是图像。然而，这是相当容易的，所以我并不真正理解这个问题。。。？您可以使用@media查询来更改行为，并更改两个（好的，三个）div（所有蓝色div）的浮动和大小。红色的都是一样的，所以不需要任何更改。@junkfoodjunkie是的，我确实忘记了代码。我认为对于图2来说是可以的。但是我想知道如何在视频和页脚之间的空间中放置两个蓝色div
float:left；最大宽度：50%应该这样做，真的。@junkfoodjunkie确实是这样，宽度是这样，但高度不是这样。你知道内容吗？如果没有，您将必须设置一个设置高度，或一个最大高度/最小高度组合谢谢Jojo。我的主要问题是要使页脚和视频之间的两个蓝色小div相匹配，你有什么建议吗？
<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
}