html - 如何设置内部 <div> 的样式和结构以在移动设备上保持父级 <div> 的大小而不使用 px 作为尺寸

Question

我正在使用 JQuery 制作具有不同层的视频 UI，显示/隐藏。目前，叠加层匹配默认视频播放器大小，无论桌面屏幕大小如何。遗憾的是，在移动设备 (iPhone) 上，叠加层的高度仅足以适应内容，而不是完整的视频播放器高度。

我已经尝试过不同的 div 嵌套以及父子 div CSS 的许多组合和类，包括: position:relative/绝对 显示:表格/表格单元格/ block 等 对父 div 使用 px 大小有帮助，但在调整屏幕/浏览器大小时，它对视频播放器大小的控制较少。允许它自动调整屏幕大小对用户更友好。

.video-box {
  position: relative;
}

.overlay1,
.overlay2 {
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  display: table;
  position: absolute;
  top: 0px;
  right: 0px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="video-box">
  <video><source src="video.mp4"></video>

  <div class="overlay1">
    <div class="content">
      <h3>You are about to watch a video</h3>
    </div>
  </div>

  <div class="overlay2">
    <div class="content">
      <h3>Video is over</h3>
    </div>
  </div>
</div>

我的目标是让每一层都匹配精确的大小，并用垂直和水平居中的文本内容覆盖视频播放器。我使用的代码使其在桌面上运行(包括 chrome inspect 移动调整大小)但在实际移动设备上不起作用。叠加层仅在水平方向上调整大小以适应文本内容，而不是整个视频播放器的高度。

Answer 1

您可以使用 css-flex 而不是第二个 div，.content使内容位于中间。请尝试以下代码。

.video-box {
  position: relative;
}

video {
  max-width: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.2);
}

<div class="video-box">
  <video><source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>

  <div class="overlay">
    <h3>video is over</h3>
    <p>what to do next</p>
  </div>

  <div class="overlay">
    <h3>Video is over</h3>
  </div>
</div>