使iframe适合父div

时间:2018-05-15 16:59:38

标签: html css iframe

我试图显示一个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>
&#13;
&#13;
&#13;

这就是我现在所拥有的,但我希望蓝盒能占据所有的空白区域。 enter image description here 谢谢你的帮助!

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

脚本<iframe src="http://localhost:8000"末尾的

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

答案 2 :(得分:0)

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