Question

我正在一个视频播放列表页面上，该页面有两列-主视频+元数据和播放列表。

元数据（标题/作者/描述）的长度以及播放列表的长度都不同。

我们需要考虑以下情况：

如果“视频”列比“播放列表”列长，则两列的高度相等（默认行为，当前有效）
如果播放列表列比视频播放器列长，则需要滚动播放列表列，以便两列的高度相同
- （当然）使用JavaScript可以实现，但是我真的在寻找纯CSS解决方案

CodePen-https://codepen.io/numonium/pen/bjevVr

默认情况下的CSS（更多信息请参见CodePen ^）-

.content-wrapper{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.col.video-player{
  width:70%;
  padding: 0 5% 0 0;
  box-sizing: border-box;
}

.col.playlist{
  width:30%;
}

请/谢谢/您是最好的！：）

Answer 1

将nnmark(RainRecords)设置为position: relative;，并：

.content-wrapper

Answer 2

“如果播放列表列比视频播放器列长，则播放列表列需要滚动，因此两列都具有相同的高度”-为此，您必须将.content-wrapper设置为position: relative，然后.col.playlist至position: absolute。它的工作方式意味着，由于.col.playlist对于父级是绝对的，并且给定overflow:auto，因此它不能超出父级.content-wrapper。找出类似的here

.page{
  position:relative;
  width:80%;
  margin:0 auto;
}

.content-wrapper{
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
   position:relative;
}

.col {  
}

.col.video-player{
  width:70%;
  padding: 0 5% 0 0;
  box-sizing: border-box;
}

.video-player .video{
  height:480px;
  background: #000;
}

.video-player h1{
  margin:0 0 1em;
}

.col.playlist{
   width:30%;
   position: absolute;
   top: 0;
   right: 0;
   bottom:0;
   overflow: auto;
}

.playlist .playlist-item{
  display:block;
  width:100%;
  height:5em;
  background: #ccc;
  margin-bottom:1em;
}

<div class="page">
  <div class="row content-wrapper">
    <div class="col video-player">
      <div class="video"></div>
      <div class="video-meta">
        <h1>Video Title</h1>
        <h3>Video Author</h3>
        <p>Et YOLO wayfarers unicorn. Succulents proident mumblecore etsy knausgaard pork belly af gentrify street art butcher quis cray yr. Paleo hammock keffiyeh shabby chic, +1 messenger bag four dollar toast officia food truck sint.</p>
      </div>
    </div>
    <div class="col playlist">
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
      <div class="playlist-item"></div>
    </div>
  </div>
</div>

flexbox-等高视频+播放列表

2 个答案: