填充視頻下的剩餘空間

Question

我有一個非常簡單的頁面，有兩個div。其中一個div顯示16：9寬高比的視頻，並且其下還有另一個div。我希望這個第二個div適合視頻底部和容器底部之間的剩餘空間，因爲知道這個容器沒有修復。

但現在，我沒有辦法做到這一點。

https://jsfiddle.net/kmfvh8rg/1/

<div id="pbzone"> 
    <div id="pgzone"> 
       <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"/> 

    </div> 

    <div id="ppzone"> 

    </div> 
</div> 

Answer 1

有兩種方法可以實現你想要什麼：

1. 第一個是通過使用絕對定位你嘗試過，你想綠色是一個股利視頻下的圖層（使用z-index屬性）。

你的情況的問題是你的div沒有任何寬度。添加left: 0;和right: 0;或簡單地width: 100%;到#ppzone{ } css。 您還應該關閉</video>標記，並將position: relative;添加到容器：#pgzone。如果沒有position: relative;添加到容器中，position: absolute;的div引用body而不是實際想要引用的父級。

此CSS情況爲例如下：

#pgzone{ 
 
    position: relative; 
 
    border-style: solid; 
 
    width: 500px; 
 
    height: 600px; 
 
    border-width: 1px; 
 
} 
 
#pgzone video{ 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 
#pbzone{ 
 
\t height: 80%; 
 
\t position: relative; 
 
\t background-color: #0e0e0e; 
 
} 
 

 
#ppzone{ 
 
    position: absolute; 
 
    z-index: 5; 
 
    bottom: 0; 
 
    top: 39.25%; 
 
    background-color: green; 
 
    left:0; 
 
    right: 0; 
 
}

<div id="pgzone"> 
 
    <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"></video> 
 
    <div id="ppzone"> 
 
    <div id="pp1"></div> 
 
    <div id="pp2"></div> 
 
    </div> 
 
</div>

第二種情況，其中，不使用絕對定位在所有的，而是display: table; CSS屬性，像波紋管：

#pgzone{ 
 
    border-style: solid; 
 
    width: 500px; 
 
    height: 600px; 
 
    border-width: 1px; 
 
    display: table; 
 
    box-sizing: border-box; 
 
} 
 

 
#pvidwrapper{ 
 
    height: 0; 
 
    display: table-row; 
 
} 
 
#pvidwrapper video{ 
 
    vertical-align: bottom; 
 
} 
 
#ppzone{ 
 
    height: auto; 
 
    background-color: green; 
 
    display: table-row; 
 
    box-sizing: border-box; 
 
}

<div id="pgzone"> 
 
    <div id="pvidwrapper"> 
 
    <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"></video> 
 
    </div> 
 
    <div id="ppzone"> 
 
    <div id="pp1"></div> 
 
    <div id="pp2"></div> 
 
    </div> 
 
</div>