我已经构建了一个页面模板(在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
非常感谢任何帮助。
答案 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>