给定以下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的解决方案.
解决方法
只需修改一个iframe包装器顶部,左侧,右侧,并从底部设置一定数量的px,并在其内部为您的iframe提供100％的宽度和高度,然后修复您的底栏.像这样：
这是一个小提琴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%;
}
