javascript - 在 javascript、jQuery 或 css 中，如何让 div 或 iframe 扩展以填充其余空间

Question

我有三个 iframe，我将顶部 iframe 设置为 50px 高度，将底部 iframe 设置为 50px，但我希望中间 iframe 扩展以填充其余空间。有没有一种技术可以用于任何窗口屏幕尺寸？谢谢。

例子:

<iframe style="width:100%; height:50px;" src="headerstuff.asp" %></iframe>
<iframe style="width:100%; height:100%;" src="Content.asp" %></iframe>  <!-- height needs to fill -->
<iframe style="width:100%; height:50px;" src="footerstuff.asp" %></iframe>

Answer 1

对于 div，这很简单。我不确定这是否适用于 iframe，但您的问题标题表明 div 就足够了:

<div style='background:red; position:absolute; top:0; left:0; right:0; height:50px;'></div>
<div style='background:green; position:absolute; top:50px; left:0; right:0; bottom:50px;'></div>
<div style='background:blue; position:absolute; bottom:0; left:0; right:0; height:50px;'></div>