如何实现包含视频与文本的两列Div在不同屏幕尺寸下堆叠并保持等宽等高？

我来帮你搞定这两个问题——堆叠时的等高问题，还有视频显示尺寸的优化，咱们一步步来：

一、解决堆叠时的等高问题 #

你的核心问题是移动端堆叠布局时，父容器的高度没有明确的参考基准，加上padding撑开容器导致高度不一致。咱们调整CSS的flex配置：

.page-wrapper2 { 
  margin: 0px; 
  border: 2px solid black;
  min-height: 100vh; /* 让容器至少占满视口高度，为子元素提供高度参考 */
}
.row { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 100%;
  min-height: 100%; /* 继承父容器的最小高度 */
}
.column { 
  display: flex; 
  flex-direction: column; 
  flex-basis: 100%; 
  flex: 1; /* 关键：让列在flex布局中自动均分可用空间，堆叠时也生效 */
}
.blue-column { 
  background-color: blue; 
  height: 100%; /* 确保子容器占满column的高度 */
}
.red-column { 
  background-color: red; 
  height: 100%; 
  padding: 40px;
  box-sizing: border-box; /* 重要！避免padding额外撑开容器，导致高度溢出 */
}
@media screen and (max-width: 800px) { 
  .row { 
    flex-direction: column; 
    /* 去掉原有的height:100%，依赖flex:1自动填充空间 */
  }
}

关键改动说明：

• 给.page-wrapper2加min-height:100vh，让整个容器至少占满屏幕高度，为子元素提供明确的高度基准
• 给.red-column添加box-sizing:border-box，保证padding不会额外增加容器高度
• 保留.column的flex:1属性，不管是横向排列还是纵向堆叠，都会让每个列自动填充可用空间，保持等高

二、优化视频显示尺寸 #

直接给iframe设置height:100%容易导致视频拉伸变形，咱们用aspect-ratio保持16:9的标准视频比例，同时让视频填满容器：

修改.blue-column和iframe的CSS：

.blue-column { 
  background-color: blue; 
  height: 100%;
  position: relative; /* 为iframe的绝对定位做准备 */
}
.blue-column iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9; /* 强制保持16:9的视频比例 */
  object-fit: cover; /* 确保视频填满容器，不会变形 */
}

这样修改后，视频会保持正确的宽高比，同时尽可能填满.blue-column的空间，在不同屏幕尺寸下都能显示得更饱满。

完整代码整合 #

CSS #

.page-wrapper2 { 
  margin: 0px; 
  border: 2px solid black;
  min-height: 100vh;
}
.row { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 100%;
  min-height: 100%;
}
.column { 
  display: flex; 
  flex-direction: column; 
  flex-basis: 100%; 
  flex: 1;
}
.blue-column { 
  background-color: blue; 
  height: 100%;
  position: relative;
}
.blue-column iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.red-column { 
  background-color: red; 
  height: 100%; 
  padding: 40px;
  box-sizing: border-box;
}
@media screen and (max-width: 800px) { 
  .row { 
    flex-direction: column; 
  }
}

HTML #

<div class='page-wrapper2'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        <iframe src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <div class='column'>
      <div class='red-column'>
        <h2>Red Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button>Watch today</button>
      </div>
    </div>
  </div>
</div>

调整后，不管是桌面端的横向排列，还是移动端的堆叠布局，两个列都会保持等高，同时视频也会以合适的比例填满容器，显示效果更理想。

内容的提问来源于stack exchange，提问作者EF_1000