在不使用表格的情况下将 iframe 填充到屏幕底部答案

【问题标题】：Make an iframe fill to bottom of screen without using tables在不使用表格的情况下将 iframe 填充到屏幕底部
【发布时间】：2021-11-30 14:33:40
【问题描述】：

我想在占据屏幕其余部分的 iframe 上方显示一个包含任意内容的标题。我已经设法使用以下方法来处理表格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body, iframe, table, tr, td {
  margin: 0; padding: 0;
}
html, body, iframe, table, #content {
  height: 100%; width: 100%;
}
table {
  border-collapse: collapse;
}
iframe {
  border: 0;
}
</style>
</head>
<body>
  <table>
    <tr><td>
      <div id="header">
        <p>some arbitrary stuff in a header</p>
        <p>this is sized dynamically</p>
        <p>it's not a fixed size</p>
      </div>
    </td></tr>
    <tr><td id="content">
      <iframe src="http://www.bing.com/search?q=stackoverflow" />
    </td></tr>
  </table>
</body>
</html>

这适用于 Firefox 和 Chrome，但不适用于 IE7（我不知道为什么）。如果不使用表格，这是我能得到的最接近的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {
  margin: 0; padding: 0;
  height: 100%;
}
iframe {
  margin: 0; padding: 0;
  width: 100%;
  border: 0;
}
</style>
</head>
<body>
  <div id="header">
    <p>some arbitrary stuff in a header</p>
    <p>this is sized dynamically</p>
    <p>it's not a fixed size</p>
  </div>
  <iframe src="http://www.bing.com/search?q=stackoverflow" />
</body>
</html>

这在所有浏览器中看起来都一样，但是 iframe 太短了。如果我将它的高度设置为 100%，它会像屏幕一样大，并出现 2 个滚动条（与表格版本中的 IE7 相同）。我希望 iframe 占用浏览器窗口中剩余的任何空间，但不会更多。我宁愿不必求助于Javascript。

【问题讨论】：

标签： html css iframe css-tables

【解决方案1】：

我认为 CSS 盒子模型没有可用垂直空间的概念。

【讨论】：

【解决方案2】：

这可以填满空间：

iframe {
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 800px; (Whatever the height of your content is)
    border: 0;
}

【讨论】：

【解决方案3】：

This 看起来像你需要的。查看源代码以获取更多信息。

【讨论】：

那行不通。将 iframe 放入内容中，然后在浏览器顶部看到一小段 iframe。

【解决方案4】：

那为什么不直接使用老式的普通镜框呢？ iFrame 的关键在于它不会超出正常元素的范围。

【讨论】：

我需要顶部框架动态调整大小以适应其中的内容。

【解决方案5】：

尝试使用以下 javascript 函数

<script language="javascript">
function adjust_iframe(oFrame)
{
    if(!oFrame) return;

    var win_height;
    var frm_height;     

    // Get page height Firefox/IE
    if(window.innerHeight) win_height = window.innerHeight;
 else if(document.body.clientHeight) win_height = document.body.clientHeight;   

    // Dtermine new height
    frm_height = win_height - oFrame.offsetTop - 15; // replace 15 accordingly

    // Set iframe height
    oFrame.style.height = frm_height + "px";
}
</script>

请注意，您必须在某些时候调用它（例如 Onload），例如：

<body onload="adjust_iframe(document.getElementById('myiframe'));">

【讨论】：

我目前有类似的实现。但问题的重点是在没有 javascript 的情况下做到这一点。

【解决方案6】：

找到了。

<body>
<div style="height: 25vh">
    <h1>HomePage</h1>
</div>
<div style="height: 75vh">
    <iframe style="height:100%;" src="" name=""></iframe>
</div>

使用“vh”指定根 div 的高度。 vh 是总屏幕大小的百分比（不是嵌套的父级大小，不是您想要的大小，而是整个屏幕空间）。然后指定 iframe 为 100% 高度。它会填满div。用火狐测试过。

【讨论】：