Question

我有一个非常简单的页面，有两个div。其中一个div显示宽高比为16：9的视频，并且还有另一个div。我希望第二个div适合视频底部和容器底部之间的剩余空间，知道这个容器没有修复。

但是现在，我还没有办法做到这一点。

<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

实现你想要的东西有两种可能性：

第一个是尝试使用绝对定位，并且想要绿色的div是视频下的图层（使用z-index属性）。

你的案例中的问题是你的div没有任何宽度。将left: 0;和right: 0;或仅width: 100%;添加到#ppzone{ } css。您还应该关闭</video>标记，并将position: relative;添加到容器：#pgzone。如果没有position: relative;添加到容器，则position: absolute;引用body的div代替您实际想要引用的父级。

此CSS案例如下所示：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

第二种情况，根本不使用绝对定位，而是使用display: table; css属性，如下：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

填充视频下剩余的空间

1 个答案: