div 容器和 iframe 自动高度

Question

我一直在寻找类似的方法，但仍然没有找到任何解决方案来设置 div 的高度以根据 window 大小自动调整它（即当 window尺寸较小，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 的页脚，这就是为什么我想在 window 尺寸减小时自动调整高度，这个 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>

Answer 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';
})();

Answer 2

使用CSS我们可以通过以百分比提及身高来实现。

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

Answer 3

您的代码包含 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>

div 容器和 iframe 自动高度

div container and iframe auto height

html

css

height