使用 flex 作为显示，并有一个视频作为孩子不尊重我的填充设置答案

【问题标题】：Using flex as display, and having a video as child does not respect my fill setting使用 flex 作为显示，并有一个视频作为孩子不尊重我的填充设置
【发布时间】：2020-03-02 09:51:36
【问题描述】：

我想要一个 HTML 页面：

标题 div - 一些高度，基于其内容
内容 div（标题下方）- 取标题下方高度的其余部分
表格（在内容 div 中） - 对其父级（内容 div）的两个维度都取 100%
视频项目（在表格中） - 为其父项 (td) 的两个维度获取并保留 100%

这是我所拥有的：

body { margin: 0; }

#main {
  position: absolute;
  left:0px;
  top:0px;
  
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background:red;
}

#header {
  background:yellow;
}

#content {
  background:gray;
  flex:1;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

video {
  width: 100%;
  height: 100%;
}

<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>

现在，问题出在 video 标签上（如果你运行这个 sn-p 会有滚动条 - 我不想要它们）。

如果我删除视频标签，一切都会按预期进行。但是，如果有 video 标签，它会破坏 'flex' 选项：它会放大 td，因此表格也会变大，然后内容也会变大 - 因此启用滚动条并且页面将不适合屏幕。

可能在加载媒体时调整视频大小，此时所有 css 操作都已完成。

但是，即使在播放过程中，有什么方法可以使视频的大小与其父级（td）的 100% 宽度和高度完全相同？

【问题讨论】：

为什么需要这张桌子？
有时表格很简单（1row, 1col），但有时它更大（3row, 3col）并且它是动态生成的 - 可能不是必须的，但我不想在一个问题中混合.

标签： html css html5-video

【解决方案1】：

你可以制作视频position:absolute

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="main">

    <div id="header">
      Header
    </div>
    <div id="content">


      <table>
        <tr>
          <td>
            <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
          </td>
        </tr>
      </table>

    </div>


  </div>

【讨论】：

这正是我所需要的。只有一件事我不清楚：min-height: 0; 在#content 中的原因是什么？
@Daniel 在这种特殊情况下不需要它，但拥有它很好，因为它可以防止您的元素在有更多内容的情况下溢出。相关：stackoverflow.com/q/36247140/8620333
谢谢。关于为什么这在 IE11 中不起作用的任何想法？（试图在 JSFiddle 中检查，但他们的页面在 IE 下根本无法运行。然后在我的服务器上尝试，FF、Opera、Edge、Chrome 都可以正常工作，但 IE 没有）
@Daniel 好吧，众所周知，IE 在 flexbox 上有很多问题。不幸的是我无法测试它

【解决方案2】：

你想要这个吗...

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  height: 100%;
  
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>

【讨论】：

不，垂直滚动条还在。我希望视频占用 column > table > td 提供的最大空间。（试图点击“运行代码sn-p”）