如何让 iframe 占据所有剩余空间答案

【问题标题】：How to make an iframe take up all remaining room如何让 iframe 占据所有剩余空间
【发布时间】：2012-09-27 00:16:18
【问题描述】：

我有以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>

<style type="text/css">
    .wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    text-align:center;
}

#header, #footer {
    width:100%;
    float:left;
}

#footer {
    position:fixed;
    bottom:0;
    z-index:999999;
}
</style>

</head>
<body>
  <div id="header">
      <div class="wrap">
           <div class="logo">
                <h1>Header</h1>
           </div>
           <div>Menu goes here</div>
      </div>
 </div>

 <iframe src="http://www.cnn.com"></iframe>

  <div id="footer">
      <div class="wrap">
           <h2>Footer</h2>
      </div>
 </div>
</body>
</html>

如何设置 iframe 以使其占据页眉和页脚之间的所有剩余宽度和高度？

【问题讨论】：

看看我的回答，我需要使用一些javascript，但它工作得很好:)

标签： html css iframe height

【解决方案1】：

解决了，需要一些 javascript :)

现场示例：
~~http://simplestudio.rs/yard/framed/framed.html~~（离线）

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>

<style type="text/css">

#framed {

    position: relative;
    width: 100%;
    height: 100%;   

}

.wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    text-align:center;
}

#header, #footer {
    width:100%;
    float:left;
}

#footer {
    position:fixed;
    bottom:0;
    z-index:999999;
}
</style>

    <script>

        var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);

        function chng_iframe_height(ifrid,hid,fid) {

            var eheight = window.innerHeight;
            var ifrobj = document.getElementById(ifrid); 
            var header = document.getElementById(hid); 
            var footer = document.getElementById(fid); 
            var header_height = getComputedStyle(header).height;
            var footer_height = getComputedStyle(footer).height;

            var reserved_height = parseInt(header_height) + parseInt(footer_height);

            ifrobj.style.height = eheight - reserved_height +"px";     

        }
    </script>

</head>
<body onload="chng_iframe_height('framed','header','footer');">
  <div id="header">
      <div class="wrap">
           <div class="logo">
                <h1>Header</h1>
           </div>
           <div>Menu goes here</div>
      </div>
 </div>

 <iframe src="http://www.cnn.com" id="framed"></iframe>

  <div id="footer">
      <div class="wrap">
           <h2>Footer</h2>
      </div>
 </div>
</body>
</html>

基本上，我计算页眉和页脚呈现的高度，获取 window.innerHeight 并从该数字中我知道页脚中的页眉之间还剩下多少像素，因此我将该值分配给 iframe 和 whoila 它可以工作...

我还设置了 setinterval 以每半秒调用一次该函数，因此如果您调整窗口大小，它几乎会立即更新 iframe 高度...

【讨论】：

效果很好 :) 不过我想知道，你为什么要使用 setInterval？
因为如果您仅在正文加载时调用 chng_iframe_height()，您将只有 1 个 iframe 高度适合该特定时刻，具体取决于窗口大小。因此，如果您出于某种原因更改窗口大小，您的 iframe 高度将保持原样，因此您的设计将会中断。我够清楚了吗？
啊，现在我明白了 :) 如果我说我不关心调整大小，它会简化代码吗？

【解决方案2】：

尝试在你的 iframe 中添加一个类或像这样当场设置它的样式：

<iframe style="height:100%; width:100%;" src="http://www.cnn.com"></iframe>

也试试这个：

<iframe height="100%" width="100%" src="http://www.cnn.com"></iframe>

另外不要忘记删除 body 标签上的填充/边距，这样页眉和页脚就可以一直走：

body {
    margin:0;
    padding: 0;
}

编辑：

如果这不起作用，您将不得不添加固定的宽度和高度。

【讨论】：

尝试这两种方法得到了相同的结果：元素确实扩展到整个宽度，但仅扩展到 154px 高度。没看明白为什么要加body css代码，不是默认做的吗？
好吧，你可以尝试测试一下，只需将一些 div 设置为 100% 宽度，然后看看它的位置。关于 iframe：尝试将第一个示例中的高度规则更改为最小高度。您应该尝试使用 min-height 和 position css 规则。谷歌他们。

【解决方案3】：

我使用了 .css() 和 $(window).height() 当你使用 $(window).height() 确保你的文档类型为 html

<script>
      var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);

        function chng_iframe_height(ifrid,hid,fid) {

            var eheight = $(window).height();
            var ifrobj = document.getElementById(ifrid); 
            var header_height = $("#" + hid).css("height"); // getComputedStyle(header).height;
            var footer_height = $("#" + fid).css("height"); 

            var reserved_height = parseInt(header_height) + parseInt(footer_height);

            ifrobj.style.height = eheight - reserved_height +"px";     

        }
    </script>

【讨论】：