好的，所以我需要能够拥有一个完全没有溢出的 100% 屏幕的页面。我在页面顶部有一个 iframe，在底部有一个 img。
我需要能够让 iframe 自动设置其高度以填充文档中的所有剩余空间。
这里是一些代码:
<!DOCTYPE HTML>
<head>
<style type="text/css">
img {
border:0px;
padding:0px;
float:left;
width:33.3333%;
}
body {
height:100%;
width:100%;
margin:0px;
}
iframe {
overflow-y: scroll;
overflow-x: hidden;
border:0px;
padding:0px;
width:100%;
height:auto;
}
</style>
</head>
<body>
<!-- INNER CONTENT -->
<iframe frameborder="0" src="..." ></iframe>
<!-- BOTTOM BUTTONS -->
<center>
<div>
<a href="index.html">
<img src="img3.png" />
</a>
<a href="page2.html">
<img src="img1.png" />
</a>
<a href="page3.html">
<img src="img2.png" />
</a>
</div>
</center>
</body>
我需要某种可以为 iframe 标记设置的计算。像
<iframe height="'bodyheight-imgheight'"></iframe>
任何类型的答案都是好的，无论是 CSS、HTML、Js、jQ..
[编辑] 我知道我可以简单地设置图像的高度并手动设置 iframe 的高度，但我希望图像高度随宽度变化
感谢大家的回复，我用这个答案来解决我的问题: http://jsfiddle.net/AmVhK/6/
最佳答案
使用 javascript 还不错，您可以只计算父项中所有内容的高度，然后从父项高度中减去该高度。因此，如果 iframe，$frame 是有问题的元素，您可以执行以下操作:
height = $frame.parent().height();//height of parent
$frame.siblings.each(function() {
height -= $(this).height();
});
$frame.height(height); //set frame height to remaining height of parent
因此，如果 $frames parent 是主体或具有 100% 的高度，它应该占据页面上的剩余空间。
注意:如果用户调整页面大小，您将不得不重新计算高度
关于javascript - 如何设置 iframe 以自动填充 HTML 中的空白正文空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20182532/