Question

如何获得 iframe来填充屏幕高度减去底部33px页脚空间？我需要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>

谢谢大家！

Answer 1

我让它与[GASPS] <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>

注意：请勿使用严格的doctype。

PS。 <iframe>是关键。

Answer 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>

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

2 个答案: