CSS，DIV的响应

Question

我试图实现类似的东西：你必须知道它应该是全屏幕

月1日，这就是为什么我使用％。

到目前为止，无论我的屏幕宽度如何，我只能将视频留在16：9。我也能够创建两个较轻的蓝调divs，但它们不会自动适合视频和页脚之间的空间。

我也做了红色的div。

现在我想知道如何让小蓝色的div适合这个空间，因为现在它们并没有出现，而且唯一的方法就是设置一个固定的高度，寻找。我还想知道如何制作宽屏幕的第二个数字。

这里是我的代码：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;，并添加一个容器为浅蓝色的和改变相反的方式，你有你想要的布局。