iframe响应高度和宽度适合内容

Question

我已经构建了一个嵌入html的iframe，如下所示：

<div class="document">                            
  <iframe src="http://localhost:8080/doc625.htm">
 </iframe>
</div>

虽然这些是我应用于div和iframe的类：

.document {
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 50%;
    padding-top: 50%;
    overflow: hidden;
}

.document iframe {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;

}

问题在于，当我尝试展开屏幕时，Iframe的高度与其内容不符。

我该如何解决？

以下是截图：

100％缩放

50％缩放

Answer 1

我上传了2页一个孩子（page2.html）另一个parent (page1.html)。

我添加了经常使用的默认值，但主要更改如下：

.document {
      overflow-y: scroll;
  }
  .document iframe {
      bottom: 0; right: 0;
  }

Answer 2

You mean the height of the iframe doesn't follow ? I think you shouldn't use all these properties, just set your iframe dimensions with viewport sizes, like "vh" for the height and "vw" for the width, and set it to "100vh" and "100vw" like :

iframe {
    height:100vh;
    width:100vw;
    border:none;
}