iframe 响应式高度和宽度适合内容答案

【问题标题】：Iframe responsive height and width fit to contentiframe 响应式高度和宽度适合内容
【发布时间】：2016-03-01 17:47:41
【问题描述】：

我已经构建了一个嵌入 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% 缩放

【问题讨论】：

您要构建的网站的地址是什么？也许你看到的截图？
所以，我猜不是吧？
它不在线。我上传了 2 张截图。如您所见，缩放 100% 可以，但如果我尝试缩小 iframe，则 iframe 不适合其内容。
overflow-y: scroll or auto on .document 或者您也可以尝试body，但您也应该分配position: relative。
它不能同时运行 2 :( 只添加其他滚动条。我想使用@media 并在屏幕变化时设置像素高度，但我认为不是最佳选择解决方案。

标签： html css iframe responsive-design

【解决方案1】：

我已经上传了 2 个页面一个孩子 (page2.html) 另一个 parent (page1.html)。

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

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

【讨论】：

谢谢我发现问题出在我在 div 标签之前的部分标签中。现在我希望找到解决办法。
Found:) 我已经更改了之前的引导程序的 div 标签。
到
ahah :) 现在我的页脚还有其他问题。之后我有一个空白空间。你觉得我能做什么？
对不起是一个愚蠢的问题。我已经输掉了：0 大声笑:) :)
我正要这么说。 :D