iframeの高外部URL

Question

ダブルスクロールバーを防止するためのCSSコード

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

<?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> 

（ワードプレスで）私が持っている問題は、iframeの 高さです。私は height: 100vh;を使ってみましたが、それは十分ではありません。

私が試したすべての種類の他のjqueryスクリプトでは、外部リンクに追加のjsスクリプトが必要なので、それも不可能です。

作業iframeの高さの例は、このウェブサイトである： demo example

任意の助けが最も高く評価され。

Answer 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>