Help with iframe Resizing

This site is best viewed in a modern browser with JavaScript enabled.

Capt_Newbie

Hello All!

I am in the frustrated position of trying to create a re-sized height of an iframe sandwiched in between fixed dimension areas.

Please see the image @ http://www.bcw.se/image_resources/iframe_help_01.png for reference of the goal and current state of my mission. I also pasted in the code that I used to create it below. As you can see the iframe is not expanding beyond a set standard I presume.

THE CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif; font-size:13px; background:#003; color:#CCC;">

<!-- Header Area --><table width="100%" height="125" bgcolor="#003366" style="margin-top:0px; border-collapse:collapse;"></table>

<!-- Menu Area --><table width="100%" height="30" bgcolor="#006699" style="margin-top:10px; border-collapse:collapse;"></table>

<!-- Framed Content, FLEXIBLE RESIZED TO FIT THE SCREEN... I WISH!! --><table width="1024" height="100%" bgcolor="#003366" style="border-collapse:collapse;">
<div style="margin-left:10px; margin-top:10px; position:relative;">
<iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em; border-collapse:collapse; position:relative;" ></iframe>
</div>
</table>

<!-- Footer Area --><table height="50px" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>

</body>
</html>

Obviously the iframed content is en example page, so I am not looking to have an IKEA web page iframed, but I am wanting to have another complete webpage iframed and have the scrollbar only within the iframe area.

As my handle suggests I am a novice developer playing for my own interest and benefit, so feel free to talk simply and down to me. All highly technical responses will likely give me a bloody nose.

At any rate, thanks in advance!

/Brian

jadhav_soma

hi,
add below style in head......
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
</style>
and remove the iframe container <table>
its working.....
below is the code..... hope it will be helpful 2 u...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
</style>
</head>

<body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif;

font-size:13px; background:#003; color:#CCC;">

<table width="100%" height="125" bgcolor="#003366" style="margin-top:0px;

border-collapse:collapse;"></table>

<table width="100%" height="30" bgcolor="#006699" style="margin-top:10px;

border-collapse:collapse;"></table>

<div style="margin-left:10px; margin-top:10px; position:relative;">
<iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em;

border-collapse:collapse; position:relative;" ></iframe>
</div>

<table height="50px" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>

</body>
</html>

Capt_Newbie

Hello jadhav.soma!

Thanks for your reply! I cannot get the result though.

The iframe resizes to 100% of the screens resolution perfectly fine, but there in lies the problem. It resizes to the entire screens height dimension and not to the remaining height dimension.

So the iframe runs off the screen and under or over the footer area depending upon if the footer's position is fixed or not.

I have been surfing a lot and found that many forum posts suggest a javascript type solution. Though, with risk of overstating the obvious, my coding is at a fetal stage, and my jscript coding has not even been conceived yet.

I continue my quest, thanks again though!

/Capt Newbie

jadhav_soma

i didn't get you???

Capt_Newbie

Hello again!

The iframe, on my computer at any rate, stretches to 100% of the window's total height. And what I need is: 100% minus the [header height], [menu height] and [footer height].

Taking my sample as en example, the header, menu, footer and margins come to 235px (if I can add). So I need the iframe to fill in [100% - 235px.]

When I try fixes that re-size the iframe to 100% it stretches it to the widow's max height; and not the remaining height after taking away the 235px.

At least that is how it is showing on my machines.

Hope that was a little be explanation.

/Capt Dumbass .... I mean Newbie

jadhav_soma

thank you for details given....

can you manage this using % (percentage) like below code...

<body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif;

font-size:13px; background:#003; color:#CCC;">

<table width="100%" height="22%" bgcolor="#003366" style="margin-top:0px;

border-collapse:collapse;"></table>

<table width="100%" height="6%" bgcolor="#006699" style="margin-top:10px;

border-collapse:collapse;"></table>

<div style="margin-left:10px; margin-top:10px; position:relative;height:62%">
<iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em;

border-collapse:collapse; position:relative;" ></iframe>
</div>

<table height="10%" width="1024" bgcolor="#006699" style="margin-top:10px;"></table>

</body>
</html>

Capt_Newbie

Hey hey!!

We have a heart beat! So close now...

I noticed what you did with the height of the <iframe>'s <div> being 62%.

Using deductive logic, the 235px is equal to 38%.

I then was curious to find that the 100% is equal to approximately 620px.

Ergo the 62% is equall to approx. 385px.

Can I ask why the 62%? Is the 620px the key to things?

also I noticed that there still existed a scroll bar on the right hand side of the window, so I played with the % a little and added a "hidden" overflow to the body style. the footer get cliped a hair, but I could massage the % even more I suppose.

So oh wise wizzard of html, I think you can come up with the best possible solution without using j-script or other coding.

So how did you come up with the 62%?

/Capt Hopefull

Capt_Newbie

God I am an idiot.... I see what you did, you divided the entire document heights from 100%.

DUH! :p

Unfortuntely that won't do me because the header, menu and footer have set graphic elements, darn it all.

So close there...:o

jadhav_soma

hi,

you can decrease margin as you given top & bottom it will less your right main scroll ...........
sorry for my bad english.....

OR other than this scroll is appeared only becoz of top/bottom margin you can manage this top & bottom space using padding and then solve our problem ..(hide the scroll)..

you can do it...
Thnks,
Som

Capt_Newbie

So... after much toiling, I think I found the solution.

I am going to use <frameset> html tags, an outline of the code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>

<FRAMESET rows="125, 30, 1*, 50" framespacing="10" frameborder="0" >

<!--HEADER-->
  <frame src="header.html" > 

<!--MENU-->  

  <frame src="menu.html">

<!--RESIZE CONTENT-->  

  <frame src="flexible_content.html">

<!--FOOTER-->  

  <frame src="footer.html">

</FRAMESET>

<noframes></noframes>

</HTML>

The header, menu, resizable content and footer will be separate html files.

The resizable <iframe> exists with no other elements within it's HTML file and is set to 100% height fixed to fill the html. the 100% then fills the 3rd frame nicely.

A sample <iframe> html file is as here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height:100%; margin:auto; width:1024px;">

<table width="1024" height="100%" style="margin:auto;">

<div style="margin-left:10px;>
<iframe src="http://www.samplewebpage.se" width="1002" height="99%" scrolling="auto" style="border-radius: 0.35em 0.35em 0.35em 0.35em; border-collapse:collapse; position:fixed; bottom:2px;"></iframe>
</div>

</table>
</body>
</html>

All preliminary testing and indications that this is the way to go. All the links from the "samplewebpage.se" are working fine (although I haven't tried any external links yet).

Now I can move on with the project at last.

Thanks Som for taking a little time out to lend me a hand!

/Capt Possitive

Major_Payne

Additional information...

How to Size an IFRAME According to its Content