给定以下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%; }
原文地址:https://www.jb51.cc/html/224700.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。