HTML CSS，一％高度的div

Question

我有具有定義高度（80％）和寬度（100％）母體DIV中擬合2個DIV， 它包含兩個div：

• 第一必須總是保持在16：9的比例，現在可以。所以如果我改變我的屏幕寬度，div的高度發生變化（保持比例）
• 第二個必須適合16：9的div和剩下的父div之間的高度。

我已經嘗試了很多東西，但我無法弄清楚如何製作它。

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

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 
 
}

<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>

Answer 1

這裏是一個沒有彎曲另一種解決方案：

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 640px; 
 
    width: 360px; 
 
} 
 

 
div { 
 
    border: 1px solid grey; 
 
} 
 

 
#pbzone{ 
 
    height: 80%; 
 
    background-color: pink; 
 
    position: relative; 
 
} 
 
#ppzone{ 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    top: 39.25%; 
 
    background-color: green; 
 
} 
 
#pgzone{ 
 
    padding-top: 56.25%; 
 
    background-color: black; 
 
    background-size: cover; 
 
    border: 0px; !important 
 
}

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

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

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

你可以玩top屬性#ppzone。