resize iframe height according to parent header size or height in javascript

Dear Expert,
My webpage will have some header area and one iframe , and I would like to adjust
the height the iframe according to the full content height of src link in <iframe> tag so
that I can use drag down scroll bar to view the bottom content of the link, it will be okay
if i set style for html { overflow:auto}  but the display is not good, so I want to merge
iframe 's scroll bar with IE's scroll bar into one bar  by html {overflow:hidden} but,
For example, content of the src link is www.yahoo.com,
I can NOT  see the bottom content of yahoo in iframe by move down scroll bar
So I try to google it for the problem solution at  
http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height, but it is no any response for all suggestion

Any other suggestion , please advise, if possible, could you try the following code  at your site in IE broswer and check whether you are able to view the most bottom content of
the www.yahoo.com link in iframe

Duncan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style> *{margin:0;padding:0} 
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse} 
iframe {height:100%;width:100%}  
.header {border-bottom:1px solid #000} 
 .content {height:100%;
  position: fixed;} 
 </style> 
 <script type="text/javascript" >
     function pageY(elem) {    
return elem.offsetParent ? (elem.offsetTop + 
pag(elem.offsetParent)) :elem.offsetTop; }
	 var buffer = 20; 
	 //scroll bar buffer 
	 function resizeIframe() {    
var height = document.documentElement.clientHeight; 
height -= pageY(document.getElementById('ifm'))+ buffer ;     
height = (height < 0) ? 0 : height;  
document.getElementById('ifm').style.height = height + 'px'; } 

document.getElementById('ifm').onload=resizeIframe; 
window.onresize = resizeIframe; 
 
 </script>
 
 </head> 
 <body> 
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
 <h1>header</h1>
   <iframe id='ifm' scrolling="yes" src="http://www.yahoo.com" frameborder="0"></iframe>
 
 </body> 
 </html>

Open in new window

LVL 13
duncanb7Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Here you go: http://jsfiddle.net/rjurd/fZqjf/

I've just modified some of your javascritp code
function pageY(elem) {
    var op = elem.offsetParent;
    var ot = elem.offsetTop;
    
    var res = elem.offsetParent ? (elem.offsetTop + elem.offsetParent.offsetTop) : elem.offsetTop;
    return res
}
var buffer = 0;
//scroll bar buffer 


function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm')) + buffer;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

window.onresize = resizeIframe;

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
duncanb7Author Commented:
Sorry late to reply becoz no one answer it until you did.

Let me digest this and try

Duncan
0
RobOwner (Aidellio)Commented:
that' alright.  let me know how it goes for yoiu
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

duncanb7Author Commented:
Thanks for your reply, and the issue is sovled
0
RobOwner (Aidellio)Commented:
thanks for the points but can you please change to A grade??
0
sullisnyc44Commented:
Does this work across domains?
0
RobOwner (Aidellio)Commented:
of course - see the test link above at jsfiddle
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.