Как установить размер iframe динамически

Как я могу установить размеры iframe динамически, поэтому размер является гибким для разных размеров видовых экранов?

Например:

<iframe src="html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

В этом случае высота зависит от размера окна браузера. Он должен устанавливаться динамически в зависимости от размера окна браузера.

При любом размере соотношение сторон iframe должно быть одинаковым. Как это можно сделать?

Ответ 1

Если вы используете jquery, это можно сделать, используя $(window).height();

<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>

Ответ 2

Не совсем уверен, что означает 300? Мисс опечатка? Однако для iframes было бы лучше использовать CSS:) - Я обнаружил, что при импорте видео в YouTube вы игнорируете встроенные вещи.

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>

Ответ 3

Вы пробовали height="100%" в определении вашего iframe? Кажется, что вы делаете то, что ищете, если вы добавите height:100% в css для "body" (если вы этого не сделаете, 100% будет "100% вашего контента" ).

EDIT: не делайте этого. Атрибут height (а также width один) должен иметь целое число как значение, а не строку.