flexbox html5视频填充剩余空间

Question

我尝试使用html5视频填充flexbox div中的剩余空间。

然而，它溢出而不是做我想要的：

＆＃13;

＆＃13;

.wrapper {
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  background-color: green;
}
.content {
  width: 100%;
  background-color: red;
}
video {
  width: 100%;
  height: 100%;
}
.footer {
  width: 100%;
  background-color: orange;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
  </div>
  <div class="footer">footer</div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/pwhwL29p/

Answer 1

[s[i:i+2] for i in range(0, len(s), 2)] # ['ab', 'cd', 'ef'] 元素中有视频和页脚。视频中的.wrapper可能有效，也可能无效，具体取决于浏览器（详情如下）。

由于您没有在保存视频的height: 100%元素上定义高度，因此结果无法预测且不可靠。同样，浏览器行为也各不相同。

这是一种跨浏览器更高效，更可靠的方法：

＆＃13;

＆＃13;

.content

＆＃13;

.wrapper {
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  background-color: green;
}
.content {
  display: flex; /* NEW */
  width: 100%;
  background-color: red;
}

video {
  width: 100%;
  /* height: 100%; <-- REMOVE; not necessary */
}

.footer {
  width: 100%;
  background-color: orange;
}

＆＃13;

＆＃13;

＆＃13;

revised fiddle

以下是它的工作原理：

• 将包含视频的<div class="wrapper"> <div class="content"> <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" /> </div> <div class="footer">footer </div> </div> 弹性项目转换为弹性容器。
• 这会激活默认设置.content，这会使视频占用横轴（在本例中为高度）中的所有可用空间。
• 删除align-items: stretch。 Flex布局动态处理高度。

更多详情：

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

更新

来自评论：

  

谢谢。它适用于标准视频标签。不幸的是，它打破了video.js

视频脚本为HTML结构添加了一个容器：

因此，height: 100%弹性容器的功能不再有效。

您需要对CSS进行调整。加上这个：

.content

revised fiddle