Сделать Iframe подходит для родительского div

Question

Я пытаюсь отобразить Iframe, и я хочу, чтобы он занимал все доступное пространство. Я перепробовал множество методов, найденных в интернете, но ничего не работает.

Кодовый файл:

#myDiv {
    width:100%;
    height: 100%;
}

#myFrame {
    display:block;
    width:100%;
    height: 100%;
    position: relative;
}

<app-navbar></app-navbar>
<div class="container" style="margin-top:100px;">
  <div class="container" id="myDiv">
    <iframe id="myFrame" src="http://localhost:8000" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts">
    </iframe>
  </div>
</div>

и это то, что у меня есть сейчас, но я бы хотел, чтобы синяя коробка заняла все пустое пространство. спасибо за помощь!

Answer 1

Измените высоту родительского элемента div на определенную высоту или на 100vh, если вы хотите, чтобы iframe занимал всю высоту области просмотра.

Проверьте jsFiddle: https://jsfiddle.net/AndrewL64/yb36ju36/, чтобы увидеть, какэто будет выглядеть так.Я связываю iframe с самим jsfiddle только для примера.

#myDiv {
    width:100%;
    height: 100vh;
}

#myFrame {
    width:100%;
    height: 100%;
}

<div class="container" style="margin-top:100px;">
  <div class="container" id="myDiv">
    <iframe id="myFrame" src="https://jsfiddle.net" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts">
    </iframe>
  </div>
</div>

Answer 2

Для отзывчивого iframe css обычно вы видите что-то вроде этого

#myDiv {
  width:100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}

#myFrame {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Answer 3

в конце скрипта <iframe src="http://localhost:8000" Добавить это в конце width= "100%" height= "100%"> Высота часть, только если вам это нужно