填充视频下方的剩余空间

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. 第一个是通过使用绝对定位，就像你尝试的那样，你希望绿色的 div 成为视频下的一个图层（使用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{
	height: 80%;
	position: relative;
	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>

1. 第二种情况，你根本不使用绝对定位，而是使用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>