让 iFrame 填充屏幕减去设置的像素页脚答案

【问题标题】：Have iFrame fill screen minus a set pixel footer让 iFrame 填充屏幕减去设置的像素页脚
【发布时间】：2010-10-29 13:19:32
【问题描述】：

如何获得 iframe 来填充屏幕高度减去底部 33 像素的页脚空间？我需要显示 iframe 的滚动条（向上和向下箭头）。而且它必须没有 Javascript（所以它可以愉快地降级:)。

（我在 SO 上找到的唯一方法是使用 padding-top，这在我的情况下似乎不起作用）：

<body>
  <div style="position: fixed; width: 100%; height: 100%; bottom: 33px;">
      <iframe frameborder="0" noresize="noresize" src="http://google.com" 
       style="position: absolute; width: 100%; height: 100%; padding-top: 33px;">
      </iframe>
  </div>
  <div style="height: 33px; bottom: 0px; position: absolute; background: red;">
       /* Footer Content */
  </div>
</body>

谢谢大家！

【问题讨论】：

也许我只是累了，但似乎 padding-top 会产生相反的效果。你不想要 padding-bottom:33px 然后将页脚放在那个空白处吗？
@Moses - padding-bottom 负责清理空白区域，真的。但与height:100% 结合使用时，它会将 iframe 的滚动条推离窗口顶部。
如果您希望 iframe 的行为与常规框架几乎完全一样，为什么还要使用它？
因为我需要 iframe 的一些行为。底部的那个 div 有弹出菜单，我想部分重叠 iframe 内容

标签： html css iframe

【解决方案1】：

我让它与 [GAPSS] <table> 一起工作，但就我的一生而言，我无法让它与 <div> 一起工作。你是对的，它正在推动<iframe> 滚动条。无论如何，在您使用 <div> 之前，您可以使用以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type='text/css'>
html, body{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
table{
    height:100%;
    width:100%;
    padding:0px;
    border-collapse:collapse;
    border:none;
}
td{
    padding:0px;
}
</style>
</head>

<body>
    <table>
        <tr>
            <td>
                <iframe frameborder="0" noresize="noresize" src="http://google.com" style="display:block; width:100%; height:100%; overflow-y:scroll; margin:0px; padding:0px;"></iframe>
            </td>
        </tr><tr>
            <td style='height:33px;'>
                <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;">
                   /* Footer Content */
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

注意：不要使用严格的文档类型。不支持<iframe>。

PS。 html,body{} 是关键。

【讨论】：

在 Chrome 中测试。没有进行其他任何测试，现在是 2:30，我只是花了太长时间试图解决它。哈！让我知道它是否有效！
@Jason, table 在我的书中和div 一样好（我仍然会以你的名字命名我的第一个孩子），但可惜它不起作用。不在 Chrome、FF、IE 中。基本上第一行只有大约 200 像素高（即，iFrame 不是屏幕高度减去 33 像素）。
@Jason，还有一件事：我复制并粘贴了您的代码，但如果您的行为正确，也许是我的错误。文档类型？还有什么？让我知道。看起来在这方面有很多想法，我谢谢你。
你的文档类型是什么？我会研究一下，因为它在 Chrome 上看起来很漂亮。
我已更新以修复它。这必须工作！哈哈，告诉我！我没有在原始文件中指定文档类型。

【解决方案2】：

<body style="margin:0;padding:0;>
  <div style="position:relative; top:0; right:0; bottom:33px; left:0;">
      <div style="width: 100%; height: 100%; bottom: 33px; position:fixed">
          <iframe frameborder="0" noresize="noresize" src="http://google.com" 
           style="position: absolute; width:100%; height:100%; overflow-y:scroll">
          </iframe>
      </div>
  </div>
  <div style="height: 33px; width:100%; bottom: 0px; position: absolute; background: red;">
       /* Footer Content */
  </div>
</body>

【讨论】：

什么浏览器？我已经在 IE、FF、Chrome 和 Safari 中对其进行了测试，以确保确定。在 height: 100% 情况下，顶部滚动箭头不会显示，因为位置最终是 -33px top
@Emile 我的错。我再次更新了它，不过我只在 chrome 中测试过。
@Emile 至于滚动条我不太确定。
抱歉，滚动条是问题的关键:)