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

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

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

Asked by duncanb7

at 2024-10-24 09:38:41

Point:500 Replies:7 POST_ID:828531USER_ID:11059

Topic:

JavaScript;;Hypertext Markup Language (HTML)

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>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:

Select All Code

Expert: Rob Jurd replied at 2024-12-08 13:41:31

of course - see the test link above at jsfiddle

Expert: sullisnyc44 replied at 2024-12-08 12:04:44

Does this work across domains?

Expert: Rob Jurd replied at 2024-12-04 19:10:19

thanks for the points but can you please change to A grade??

Author: duncanb7 replied at 2024-12-04 18:47:53

Thanks for your reply, and the issue is sovled

Assisted Solution

Expert: Rob Jurd replied at 2024-11-19 16:15:09

250 points GOOD

that' alright. let me know how it goes for yoiu

Author: duncanb7 replied at 2024-11-18 02:19:01

Sorry late to reply becoz no one answer it until you did.

Let me digest this and try

Duncan

Accepted Solution

Expert: Rob Jurd replied at 2024-11-01 20:33:17

250 points GOOD

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 bufferfunction 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;

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:

Select All Code

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

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

Your Information

Members/Profolio