如何在没有 javascript 的情况下将 iframe 扩展到文档高度？答案

【问题标题】：How to expand an iframe to the document height without javascript?如何在没有 javascript 的情况下将 iframe 扩展到文档高度？
【发布时间】：2012-08-15 12:45:06
【问题描述】：

简而言之，我想通过 iframe 实现 this website 通过框架实现的功能。使用 CSS 而没有 JavaScript，这怎么可能？

【问题讨论】：

标签： html css iframe frame

【解决方案1】：

假设您有以下 HTML：

<!doctype html>
<div>
 <iframe src="http://www.example.com"></iframe>
</div>
<div>
 <iframe src="http://www.example.org"></iframe>
</div>

现在，如果您希望（例如在您的示例页面上）第一个 iframe 具有特定高度，第二个 iframe 填充文档的其余部分，您可以使用 css 中 display 属性的表值：

html {
height: 100%;
}

body {
display: table;
height: 100%;
width: 100%;
margin: 0;
}

div {
display: table-row;
}

div:first-child {
height: 100px;
}

div:last-child {
height: 100%;
}

iframe {
display: table-cell;
width: 100%;
height: 100%;
border: none;
}

【讨论】：

此方法是否适用于旧版浏览器（即 IE6、7 和 8）？这有多“面向未来”？