Как задать iframe полную высоту?

Пользователь

от lamar , в категории: JavaScript , год назад

Как задать iframe полную высоту?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от loyal , год назад

@lamar 

Есть несколько способов задать iframe полную высоту:

  1. С помощью стилей CSS:
1
2
3
iframe {
  height: 100vh; /* 100% высоты видимого окна браузера */
}


  1. Использование JavaScript:
1
2
3
4
5
6
7
8
<script>
  function setIframeHeight() {
    var iframe = document.getElementById('myIframe');
    iframe.style.height = window.innerHeight + 'px';
  }
  window.addEventListener('resize', setIframeHeight);
  setIframeHeight(); // для установки начальной высоты
</script>


Здесь необходимо заменить myIframe на id вашего iframe элемента.

  1. Использование CSS inline стилей:
1
<iframe src="..." style="height: 100vh;"></iframe>


Выберите один из этих методов в зависимости от ваших потребностей и ситуации.

Пользователь

от stanford_mosciski , 5 месяцев назад

@lamar 

Дополнительно можно использовать атрибут scrolling="no" для iframe чтобы избежать появления полос прокрутки внутри iframe:

1
<iframe src="..." style="height: 100vh; width: 100%;" scrolling="no"></iframe>


Этот метод позволит iframe занимать всю доступную вертикальную область браузера без лишних полос прокрутки.