我有这个代码:
<!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 应用程序做，页脚和页眉将用于窗口控件，所以我需要它们始终可见。
最佳答案
我认为这会给你想要的东西( 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 )。如果您确实需要支持旧版浏览器，则有多种解决方法。请告诉我。
关于css - 如何使 iframe 使用所有可用的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29174755/