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:
HTML 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.
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...
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.
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.
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.
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)..
So... after much toiling, I think I found the solution.
I am going to use <frameset> html tags, an outline of the code is:
HTML Code:
<!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.
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!
Help with iframe Resizing
Reply With Quote
Think I got it now...
Bookmarks