html - 响应式 iframe，下面有固定的 div

Question

给定以下 DOM 结构:

<div>
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>

(See this JSFiddle for details and the styles I am already using)

我怎样才能让#bottom-bar 固定在底部，同时它上面的视频保持响应并调整到它可用的空间，而不干扰底部栏？我正在考虑通过始终位于其下方的滚动/信息栏来实现典型的视频播放器体验。

我更喜欢纯 CSS 解决方案。

Answer 1

只需修复一个 iframe 包装器顶部、左侧、右侧，并从底部设置一个像素数，并在其内部为您的 iframe 设置 100% 的宽度和高度，然后修复底部栏。像这样:

这是一个 fiddle Fiddle Demo

<div class="iframe-wrapper">
  <iframe src="https://www.youtube.com/embed/Ycv5fNd4AeM?autoplay=1"></iframe>
</div>
<div class="bottom-wrapper">
  Bottom Wrapper
</div>

和CSS

.iframe-wrapper{
  position:fixed;
  top:0;left:0;right:0;bottom:50px;
}
.iframe-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
}
.bottom-wrapper{
  height:50px;
  position:fixed;
  bottom:0;left:0;
  width:100%;
}