Question

我一直在寻找类似的方法，但仍未找到任何解决方案来设置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>

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自动高度

3 个答案: