In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

Question

I have three iframes and I set the top iframe to 50px height and I set the bottom iframe to 50px, but I want the middle iframe to exand to fill the rest of the space. Is there a technique I can use to do this for any window screen size? thanks.

example:

<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

For divs, this is pretty simple. I'm not sure if this will work for iframes, but your question title indicates divs are sufficient:

<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>

Answer 2

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

var res, ires,n1,n2,h;
n1 = $('#i1').height(); 
n2 =$('#i3').height();
h= $(window).height();
ires = n1+n2;
res = h-ires;

$('#i2').height(res);

Answer 3

This might be the answer to your question:

First, set the IFRAME's HEIGHT and WIDTH attributes to "100%".

Internet Explorer 6.0 allows you to specify a % for the height and width of the IFRAME. If you set these to 100% this tells the browser to increase the size of the IFRAME to fit into the size of the IFRAME's immediate parent container; usually the table cell it is inside. (Using smaller % numbers is often not very useful because the size of the remaining white space then varies which can look strange to the user when you resize the window.)

However, setting HEIGHT=100% will often end up with the IFRAME only being a fraction of the full window size, because the browser has already determined the size of the containing TD table cell tag. So the trick becomes telling the browser to make the containing "parent" table cell and table element grow to fill the browser. This is contrary to basic table sizing in browsers, which try to shrink tables to the minimum size needed to fit around their content.

Taken from this website, found on google.

Just for the redundancy: Set your iframe width and height to 100% and make the enclosed containers, divs or table cells fit the content as you wish. The width and height of an iframe is relative to the parenting container.