Как установить максимальную высоту iframe вместо прокрутки?

Question

Мне интересно, почему мой код внизу, моя высота установлена ​​на 150 пикселей. Я хочу установить высоту iframe такой же, как и мой контент, чтобы мне не нужно было прокручивать.

Я использую response, но предполагаю, что это то же самое для простого javascript и React.

МОЙ исходный код:

.iframe {
  width: 100%;
  height: 100%
}

<iframe class="iframe" srcdoc="<div style='text-align: center;'>
hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>"></iframe>

Как видите, мне нужно прокрутить. Я хочу, чтобы мой рост был 100%. Любая помощь будет принята с благодарностью.

Answer 1

Добавьте эту функцию в свой JavaScript, и ваш iframe будет адаптироваться к высоте его содержимого.

function resizeFrame(object) {
    object.style.height = object.contentWindow.document.documentElement.scrollHeight + 'px';
  }

и вызовите функцию onload в разметке, например:

<iframe onload="resizeFrame(this)">{$content}</iframe>

Fiddle: https://jsfiddle.net/698pfz1w/

Answer 2

Попробуйте ввести это:

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

скажите мне, если это что-то изменит