首页 > 文章资讯 > 站长教程 > 建站知识 > 海洋cms 如何让ifream框架内的内容高宽撑开？

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

时间：2023年10月01日

来源：网络

编辑：佚名

以通过以下方式实现前端让iframe框架内的内容高宽撑开：
在iframe标签中设置scrolling="no"和frameborder="0"，禁用滚动条和边框。
在iframe标签后添加一个<div>，并给该<div>设置样式position: relative; width: 100%; height: 0; padding-bottom: 56.25%;。其中，padding-bottom的值应该是iframe内嵌内容的纵横比例（例如16:9的视频应该设置为padding-bottom: 56.25%）。
使用绝对定位在上述<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://baidu.com" frameborder="0" scrolling="no"></iframe>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>

新闻资讯更多

猜你需要