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占用剩余空间时也始终可见？临时代办我希望布局保持固定，滚动条只显示iframe。

我想我尝试了所有的东西，尽可能多的谷歌搜索，但没有任何努力来实现这一目标。 iframe不完全可见，它会在页脚或标题上溢出或出现其他错误。

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

我正在为一个nw.js应用程序做，页脚和标题将用于窗口控件，所以我需要它们一直可见。

Answer 1

我认为这会给你你想要的东西（小提琴：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使用所有可用的高度

1 个答案: