Geek Answers Handbook

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

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 be exand to fill the rest of the space. Is there a way I can use to do this for any window screen size? thank.

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>
+5
source share
5 answers
<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);
+2
source

For divs, this is pretty simple. I'm not sure if this will work for iframes, but your question heading shows that divs are enough:

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

:

HEIGHT WIDTH IFRAME "100%".

Internet Explorer 6.0 % IFRAME. 100%, IFRAME, IFRAME; . ( % , , , .)

HEIGHT = 100% IFRAME , TD. , "" , . , , .

-, Google.

: iframe 100% , divs . iframe .

+2
source

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

var middleFrameHeight = $(window).height() - $('iframe #header').height() - $('iframe #footer').height();
$('iframe #content').height(middleFrameHeight);
+1
source 
$('iframe').eq(1).height($(window).height()-100);

Unfortunately. I forgot to wrap windowin a jQuery object.

Also: this code does not imply boundaries, fields, etc. Out of the box, iframes get them, so you will need to get rid of them or take them into account when subtracting other iframe heights.

0
source

More articles:


All Articles