flexbox html5 剩余视频填充 space

Question

我尝试制作一个 html5 视频来填充 flexbox div 中剩余的 space。

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

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

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

https://jsfiddle.net/pwhwL29p/

Answer 1

您在 .wrapper 元素中有一个视频和一个页脚。视频中的 height: 100% 可能有效，也可能无效，具体取决于浏览器（详情见下文）。

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

下面是一种跨浏览器更高效、更可靠的方法：

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

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

revised fiddle

工作原理如下：

将包含视频的 .content 弹性项目变成弹性容器。
这会激活默认设置 align-items: stretch，使视频占用横轴（在本例中为高度）中的所有可用 space。
删除height: 100%。 Flex 布局动态处理高度。

更多详情：

更新

来自评论：

Thank you. it works great for the standard video tag. Unfortunately it breaks with video.js

视频脚本添加容器到HTML结构：

因此，.content 弹性容器的功能不再起作用。

您需要对 CSS 进行调整。添加：

#video {
  display: flex;
  height: auto;
  width: 100%;
}

revised fiddle

flexbox html5 剩余视频填充 space

flexbox html5 video fill remaining space

html

css

html5-video

flexbox

更新