填充视频下的剩余空间

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>