div 容器和 iframe 自动高度答案

【问题标题】：div container and iframe auto heightdiv 容器和 iframe 自动高度
【发布时间】：2018-05-03 15:17:45
【问题描述】：

我一直在寻找类似的方法，但仍然没有找到任何解决方案来设置 div 的高度以根据窗口大小自动调整它（即当窗口大小较小时，div 容器和 iframe 的高度内应相应调整）目前 iframe 内容已调整，但 div 高度大小保持不变。这是我在 css 中的简单代码：

#outerdiv
{
width:100%;
height:220px;
min-height:100px;
overflow:hidden;
border-style:solid;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
#inneriframe
{
position:absolute;
top:--0px;
left:-0px;
width:100%;
height:100%;
}

这是html中的代码：

<div id='outerdiv'>
<iframe src="http://sampleiframe.org" id='inneriframe' scrolling=no frameborder="no"></iframe>
</div>

只是添加相关的 div 充当此 html 的页脚，这就是为什么我想自动调整高度，因为当前减小窗口大小时，此 div 容器占据了页面的很大一部分。

提前致谢。

这是我在上述 html 行之前添加的内容：

<script>
function() {
  "use strict";

  var page = document.querySelector('#outerdiv'),
    height = document.documentElement.clientHeight,
    frame = document.querySelector('#inneriframe');

  page.style.height = height + 'px';
  frame.style.height = height + 'px';
}
</script>

【问题讨论】：

标签： html css height

【解决方案1】：

使用 JavaScript：

(function() {
  "use strict";

  var page = document.querySelector('#outerdiv'),
    height = document.documentElement.clientHeight,
    frame = document.querySelector('#inneriframe');

  page.style.height = height + 'px';
  frame.style.height = height + 'px';
})();

【讨论】：

给出更多解释 - 它避免了 OP 通过复制和粘贴从不学习，通过解释他们将理解为什么更多，从而减少关于 SO 的问题！ :)
感谢@Mishutin 的快速回复。我在上面的 html 行之前添加了它作为脚本，但仍然相同..

【解决方案2】：

您的代码包含 HTML、CSS 和 JS。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #outerdiv {
    width: 100%;
    height: 220px;
    min-height: 100px;
    overflow: hidden;
    border-style: solid;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #inneriframe {
    position: absolute;
    top: --0px;
    left: -0px;
    width: 100%;
    height: 100%;
  }
  </style>
</head>

<body>
  <div id='outerdiv'>
    <iframe src="http://sampleiframe.org" id='inneriframe' scrolling=no frameborder="no"></iframe>
  </div>
  <script>
    (function() {
      "use strict";

      var page = document.querySelector('#outerdiv'),
        height = document.documentElement.clientHeight,
        frame = document.querySelector('#inneriframe');

      page.style.height = height + 'px';
      frame.style.height = height + 'px';
    })();
  </script>
</body>

</html>

【讨论】：

刚刚改了，但是当windows尺寸变小时div高度还是一样的，结果iframe显示在div容器的顶部，底部是空的。
这很奇怪。我让它以所有比例和屏幕尺寸工作。 F5?
是的，是的。我一直在用不同的方法解决这个问题，它似乎拒绝解决方案呵呵。我清理了缓存等以进行测试和相同的行为。顺便说一句，这是解决方案最封闭的方法，但仍在等待自动高度调整......
你的代码是对的！我遇到的问题是由于 iframe 中嵌入的页面，因为有一个我没有发现的上边距。所以非常感谢:)

【解决方案3】：

使用 CSS，我们可以通过以百分比表示高度来实现。

#outerdiv
{
  width:100%;
  height:40%;
  overflow:hidden;
  border-style:solid;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

【讨论】：

感谢 Ujjwala，但我在提出问题之前尝试了这种方法，因为这根本无法解决问题。应用这一点，当窗口尺寸较小且无法看到完整内容时，iframe 会被丢弃