使iframe适合父div

Question

我试图显示一个iframe，我想让它占用所有空间。我尝试了很多在互联网上找到的技术，但没有任何效果。

代码文件：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这就是我现在所拥有的，但我希望蓝盒能占据所有的空白区域。 谢谢你的帮助！

Answer 1

如果您希望iframe占据整个视口高度，请将父div的高度更改为特定高度或100vh。

检查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 src="http://localhost:8000"末尾的

在末尾添加此内容width= "100%" height= "100%">仅在您需要时才显示高度部分

Answer 3

对于响应式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;
}