Css 如何使iframe使用其可用的所有高度_Css_Html_Iframe_Node Webkit

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

css html iframe

Css 如何使iframe使用其可用的所有高度,css,html,iframe,node-webkit,Css,Html,Iframe,Node Webkit,我有以下代码： <!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;

我有以下代码：

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

我想我什么都试过了，尽可能多地用谷歌搜索，但没能达到这个目标。iframe不是完全可见的，它会溢出页脚或页眉，或者出现其他问题

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

我正在为一个nw.js应用程序执行此操作，页脚和页眉将用于窗口控件，因此我需要它们始终可见。

我认为这将为您提供所需的功能：

只有在由于calc函数而不需要支持较旧的浏览器时，它才会起作用。如果您确实需要支持较旧的浏览器，有很多方法可以解决。请告诉我。

您可能会被iFrame部分挂断。这与任何具有固定页眉和页脚的网站模板相同。让一个DIV占据你想要的空间，然后用一个iFrame替换掉它，或者把iFrame放在里面。有很多关于CSS模板的教程，有固定的页眉和页脚。谢谢！你救了我的命。现在我明白问题是什么了。我不关心旧的浏览器，因为这是用于节点webkit应用程序的。

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;
}