时间戳

首页 > 解决方案 > 如何使视频建议弹性项目与视频弹性项目高度相同？

html - 如何使视频建议弹性项目与视频弹性项目高度相同？

问题描述

我正在做一个个人 UI 设计项目，我想在登录页面上添加一个视频部分。视频部分由两个弹性列组成，一个视频播放器，第二列是一个带有建议的可垂直滚动的 div。我对 CSS flex 很陌生，不明白为什么可滚动的 div 与视频列的高度不同。

我需要将可滚动的 div 设置为固定高度，否则它会扩大其高度，直到其中的所有元素都可见，我不希望这样，我只希望它是一个可滚动的 div。

这是它目前的样子：

这是我的标记：


<div class="video">
  <video src="videos/main.mp4" />
  <div class="suggestions">
    <div class="suggestion">
      <img src="thumbs/1.jpg" />
      <div class="caption">
        <h3>lorem ipsum dolor siet amet</h3>
        <p>29 june 2019</p>
      </div>
    </div>
    <div class="suggestion">
      <img src="thumbs/1.jpg" />
      <div class="caption">
        <h3>lorem ipsum dolor siet amet</h3>
        <p>29 june 2019</p>
      </div>
    </div>
  </div>
</div>



.video {
  display: flex;
}

.video video {
  flex: 1.5;
}

.video .suggestions {
  flex: 1;
  overflow-y: scroll;
}

我很想知道如何使可滚动的 div 与视频 div 的高度相同，同时保持视频的响应性。谢谢！

标签： htmlcssvideoflexbox

解决方案

你需要 .video .suggestions {height: xxxx }

.flex-wrap{display:flex;}
.flex-left{flex:1.5;}
.flex-right{flex:1;position:relative;}
.video-wrap{position:relative;padding:56.25% 0 0;} /* 16:9 */
.video-player{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
.video-recom{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:scroll;}
.video-recom-item img{max-width:100%;}
<div class="flex-wrap">
	<div class="flex-left">
		<div class="video-wrap">
			<iframe class="video-player" src="https://www.youtube.com/embed/BzYnNdJhZQw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
	</div>

	<div class="flex-right">
		<div class="video-recom">
			<div class="video-recom-item">
				<img src="https://image.shutterstock.com/image-photo/bukchon-hanok-village-seoul-south-600w-718460350.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
			<div class="video-recom-item">
				<img src="https://cdn.pixabay.com/photo/2014/04/17/05/16/myeongdong-326136_1280.jpg" />
				<div class="caption">
					<h3>lorem ipsum dolor siet amet</h3>
					<p>29 june 2019</p>
				</div>
			</div>
		</div><!-- //.video-recom-scroll -->

	</div>

</div>

推荐阅读