海洋cms 如何让ifream框架内的内容高宽撑开?

以通过以下方式实现前端让iframe框架内的内容高宽撑开:

  1. 在iframe标签中设置scrolling="no"frameborder="0",禁用滚动条和边框。
  2. 在iframe标签后添加一个<div>,并给该<div>设置样式position: relative; width: 100%; height: 0; padding-bottom: 56.25%;。其中,padding-bottom的值应该是iframe内嵌内容的纵横比例(例如16:9的视频应该设置为padding-bottom: 56.25%)。
  3. 使用绝对定位在上述<div>内部放置一个子元素,并设置其样式为position: absolute; top: 0; left: 0; width: 100%; height: 100%;

完整代码示例如下所示:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
  <iframe src="https://example.com" frameborder="0" scrolling="no"></iframe>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞10
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容