высоты IFrame внешнего URL

Question

Я построил шаблон страницы (в 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

Любая помощь наиболее ценится.

Answer 1

Простая техника для создания флюидов без использования javascript или плагинов. Используя этот метод, мы получаем больше преимуществ в производительности и простоте.

Это метод позиционирования элемента внутри другого с использованием «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>