Html 身高为父母50%的孩子（未知身高）

我想买那样的东西

我的想法会解决这个问题。创建一个包含父类的div我有另一个div（负责后台）和视频。 我不想给高度，因为我希望它是有反应的

<div class="parent">

  <div class="child"></div>
  <video class="video" width="auto" height="651" controls>
    <source src="https://www.youtube.com/watch?v=7TavVZMewpY">
  </video>

</div>

.parent {
  height: 100%;
  width: 100%;
  background: white;
}

.child {
  height: 50%;
  width: 100%;
  background: green;
}

.video {
  position absolute
  left: 50%
  transform: translateX(-50%);
  top: 50%;
}

.家长{
身高：100%；
宽度：100%；
背景：白色；
}
.孩子{
身高：50%；
宽度：100%；
背景：绿色；
}
.视频{
绝对位置
左：50%
转化：translateX（-50%）；
最高：50%；
}

但是，这个解决方案不起作用。视频用于父对象的整个宽度和高度。如何解决此问题以及如何使用图片中的类似内容？

这应该可以：

• 将

  高度：50vh

  应用于

  。父项

  。这使其高度始终等于浏览器高度的50%

• 将您的

  视频

  包装到

  .child

  div

• 使用

  flex将
  .child
  div
  与底部中心对齐
  

• 将

  变换

  应用于您的

  视频

  ，使其从其高度的50%位置向下移动，这有助于归档您想要的内容，同时不违反其他CSS规则

.parent{
高度：50vh；
背景：绿色；
显示器：flex；
/*将视频与中底对齐*/
证明内容：中心；
对齐项目：柔性端
}
.视频{
高度：100px；
宽度：200px；
背景色：黑色；
转换：translateY（50%）
}

这应该可以：

• 将

  高度：50vh

  应用于

  。父项

  。这使其高度始终等于浏览器高度的50%

• 将您的

  视频

  包装到

  .child

  div

• 使用

  flex将
  .child
  div
  与底部中心对齐
  

• 将

  变换

  应用于您的

  视频

  ，使其从其高度的50%位置向下移动，这有助于归档您想要的内容，同时不违反其他CSS规则

.parent{
高度：50vh；
背景：绿色；
显示器：flex；
/*将视频与中底对齐*/
证明内容：中心；
对齐项目：柔性端
}
.视频{
高度：100px；
宽度：200px；
背景色：黑色；
转换：translateY（50%）
}

注意：转换不需要

位置：相对
注意：转换不需要
位置：相对