如何使 iframe 使用所有可用的高度

Question

我有这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <style>
    html, body, iframe {
      height: 100%;
      width: 100%;
      border: none;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
    }

    header {
      height: 34px;
      background-color: red;
    }

    footer {
      height: 17px;
      background-color: green;
    }
  </style>
</head>
<body>
  <header></header>
  <iframe src="https://freebsd.org"></iframe>
  <footer></footer>
</body>
</html>

如何使页眉和页脚保持固定，即使在调整大小时和 iframe 占用剩余 space 时也始终可见？ a.i。我希望布局保持固定，只为 iframe 显示滚动条。

我想我尝试了所有方法，尽我所能地使用谷歌搜索，但没有任何方法可以实现这个目标。要么 iframe 不完全可见，要么溢出页脚或页眉，要么出现其他问题。

到目前为止我只尝试了CSS解决方案，因为我不相信单独使用CSS是不可能的，但如果真的没有其他办法，JS解决方案也可以。

我正在为一个 nw.js 应用程序做，页脚和页眉将用于 window 控件，所以我需要它们始终可见。

Answer 1

我想这会给你想要的东西（fiddle：http://jsfiddle.net/a5oux4s8/）：

html, body {
    height: 100%;
}

html, body, header, iframe, footer {
    margin: 0;
    padding: 0;
    width: 100%;
}

header {
    height: 34px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
}

iframe {
    border: none;
    height: calc(100% - 51px);
    margin-top: 34px;
}

footer {
    height: 17px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: green;
}

仅当您因为 calc() 函数而无需支持旧版浏览器时才有效（参见 http://caniuse.com/#feat=calc）。如果您确实需要支持旧版浏览器，则有多种解决方法。请告诉我。

如何使 iframe 使用所有可用的高度

How to make iframe use all height available to it

html

css

iframe

node-webkit