使Iframe适合容器剩余高度的100％
我想设计一个横幅和一个iframe的网页。 我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。 是否有可能在没有编写Javascript代码的情况下完成它，只能使用CSS？
我试图在iframe上设置height:100% ，结果非常接近，但iframe试图填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。 这并不完美。
更新说明 ：请原谅我没有很好地描述这个问题，我尝试了CSS边距，DIV上的填充属性来成功地占据网页的整个提醒高度，但是这个技巧在iframe上不起作用。
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>诀窍是了解100％是什么。 阅读CSS规范可以帮助你。
长话短说 - “含有块”这样的东西 - 这不是父元素所必需的。 简单地说，它是具有位置的层次结构中的第一个元素：相对或位置：绝对。 如果没有别的东西，或者身体要素本身。 所以，当你说“宽度：100％”时，它会检查“包含块”的宽度，并将元素的宽度设置为相同的大小。 如果还有别的东西，那么你可能会得到一个比它本身更大的“包含块”的内容（因此“溢出”）。
高度的工作方式相同。 有一个例外。 您无法将浏览器窗口的高度设置为100％。 可以计算100％的顶层元素是body（或者html？不确定）元素，并且这个元素足以容纳其内容。 指定高度：100％将不起作用，因为它没有“父元素”来衡量100％。 窗口本身不算。 ;）
为了使某些东西完全伸展到窗口的100％，您有两个选择：
更新：我不确定当我发布这个时是否没有错，但现在肯定已经过时了。 今天，你可以在样式表中做到这一点： html, body { height: 100% } ，它实际上会延伸到整个视口。 即使有DOCTYPE。 min-height: 100%也可能是有用的，这取决于你的情况。
而且我也不会建议任何人制作怪癖模式的文档 ，因为它比解决它们更让人头疼。 每个浏览器都有一个不同的怪癖模式，所以让你的页面在浏览器中一致看起来更难两个数量级。 使用DOCTYPE。 总是。 最好是HTML5 one - <!DOCTYPE html> 。 在所有浏览器中，即使是10岁的人，都很容易记忆和运作。
唯一的例外是当你必须支持像IE5之类的东西时。 如果你在那里，那么无论如何你都是你自己。 那些古老的浏览器与今天的浏览器毫无相似之处，在这里给出的小建议将帮助你。 好的一面，如果你在那里，你可能只需要支持一种浏览器，它可以消除兼容性问题。
祝你好运！
更新2：嘿，这已经很长时间了！ 6年后，新的选择正在现场。 我只是在下面的评论中进行了讨论，以下是在今天的浏览器中使用的更多技巧。
选项1 - 绝对定位。 当你知道第一部分的精确高度时，很好，很干净。
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>我们使用JavaScript来解决这个问题。 这里是来源。
var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
iframe.attachEvent("onload", resizeIframe);
} else {
iframe.onload=resizeIframe;
}
window.onresize = resizeIframe;
注意： ifm是iframe ID
pageY()由John Resig（jQuery的作者pageY()创建，
另一种方法是使用这个position: fixed; 在父节点上。
如果我没有弄错， position: fixed; 将元素绑定到视口，因此，一旦你给这个节点width: 100%; 和height: 100%; 属性，它将跨越整个屏幕。 从这一点开始，您可以将<iframe>标签放入其中，并使用简单的width: 100%; height: 100%;跨越剩余空间（包括宽度和高度） width: 100%; height: 100%; width: 100%; height: 100%; CSS指令。
示例代码
body {
margin: 0px;
padding: 0px;
}
/* iframe's parent node */
div#root {
position: fixed;
width: 100%;
height: 100%;
}
/* iframe itself */
div#root > iframe {
display: block;
width: 100%;
height: 100%;
border: none;
} <html>
<head>
<title>iframe Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="root">
<iframe src="http://stackoverflow.com/">
Your browser does not support inline frames.
</iframe>
</div>
</body>
</html>上一篇: Make Iframe to fit 100% of container's remaining height