iframe 高度外部 url答案

【问题标题】：iframe height external urliframe 高度外部 url
【发布时间】：2017-04-17 21:28:38
【问题描述】：

我已经建立了一个页面模板（在 Wordpress 中）

<?php $iframe_demo_url = get_post_meta( get_the_ID(), 'demo_url', true ); ?>

<div class="content">topbar content</div>

<div class="iframe">
    <iframe id="product-iframe-demo" src="<?php echo esc_url( $iframe_demo_url ); ?>" frameBorder="0" noresize="noresize"></iframe>
</div>

防止双滚动条的css代码

body {background:#fff;height: 100%; padding: 0px; margin: 0px;overflow: hidden;}
iframe {display: block; background: #fff; border: none;width: 100%;}

我遇到的问题是 iframe 高度。我尝试使用height: 100vh;，但这还不够好。

我尝试过的所有其他类型的 jquery 脚本都需要在外部链接上附加一个 js 脚本，所以这也是不可能的。

一个有效的 iframe 高度示例是这个网站： demo example

非常感谢任何帮助。

【问题讨论】：

没有人吗？真的不可能吗？

标签： jquery iframe height

【解决方案1】：

无需使用 javascript 或插件即可制作流畅 iframe 的简单技术。使用这种技术，我们可以在性能和简单性方面获得更多收益。

这是一种使用“position: absolute;”将一个元素定位在另一个元素内部的技术。对于“孩子”和“位置：相对；”对于“包装”。

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="fluidMedia">
    <iframe src="http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/" frameborder="0"> </iframe>
</div>

【讨论】：