• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

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

0
duncanb7
Asked:
duncanb7
  • 4
  • 2
2 Solutions
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now