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>

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>

• javascript
• jquery
• html
• css
• xhtml

• Please keep in mint that including the needed files sever-side (e.g. using server-side-includes, PHP) is always to prefer over <iframes>, because iframes aren't accessible for some clients, such as search-engine-spiders or disabled users using screen-readers. – anroesti Commented Oct 4, 2011 at 17:32

5 Answers 5

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>

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

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

You can use $(window).height(); and $(window).width(); to get the dimensions of the browser viewport. From there you can resize based on your content.

var middleFrameHeight = $(window).height() - $('iframe #header').height() - $('iframe #footer').height();
$('iframe #content').height(middleFrameHeight);

$('iframe').eq(1).height($(window).height()-100);

Sorry. I forgot to wrap window in a jQuery object.

Also: This code assumes no borders, margin etc. Out of the box, iframes get these, so you'd need to get rid of them or take them into account in the subtraction of other iframe's heights.