iframe高度外部网址

时间:2016-12-02 21:36:44

标签: jquery iframe height

我已经构建了一个页面模板(在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 。我尝试使用height: 100vh;,但这还不够好。

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

这个网站的工作iframe高度示例: demo example

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

在不使用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>