Question

我希望在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。

Answer 1

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

Answer 2

这可以填补空间：

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

Answer 3

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

Answer 4

为什么不使用旧时尚，常规框架呢？ iFrame的要点是它不会超出普通元素的范围。

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

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

5 个答案: