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

Iframe - width 100%, height 100%

Hi,
I am using iframes.
I think its know problem that you cant get the height and width to 100%?
Was just wondering if there is nay fix to it.
Can any please help me out with it, its killing my design

Thanks
0
SameerMirza
Asked:
SameerMirza
  • 9
  • 4
1 Solution
 
R-ByterCommented:
Is this what you are looking for:

http://th.atguy.com/mycode/100_percent_iframe/

Regards
0
 
SameerMirzaAuthor Commented:
thanks for your help but it doesnt work in IE - using 6
havent tested in any other browser
Please have a look at the code below,
you would have to add any .pdf file insted of test.pdf


<html>
<head>
<link href='html\css\gtsportal.css' type='text/css' rel='stylesheet'>
<script language="JavaScript">
<!--
function resize_iframe()
{	var height=window.innerWidth;//Firefox
	if (document.body.clientHeight)
	{
		height=document.body.clientHeight;//IE
	}
	//resize the iframe according to the size of the
	//window (all these should be on the same line)
	document.getElementById("glu").style.height=parseInt(height-
	document.getElementById("glu").offsetTop-8)+"px";
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 
//Instead of using this you can use: 
//	<BODY onresize="resize_iframe()">

//-->
</script>
</head>
</body>
<IFRAME NAME="iframe1" id = "glu" src = 'test.pdf'  ALIGN="top" HSPACE="0" VSPACE="0"  frameborder="0"  width="100%" onload="resize_iframe();"></IFRAME>
</body>
</html>

Open in new window

0
 
R-ByterCommented:
Here you go, I tested in various browsers and it works:

<html>
<head>
<link href='html\css\gtsportal.css' type='text/css' rel='stylesheet'>
<script language="JavaScript">
<!--
function resize_iframe()
{       
		var height=window.innerWidth;//Firefox
        if (document.body.clientHeight)
        {
                height=document.body.clientHeight;//IE
        }
        //resize the iframe according to the size of the
        //window (all these should be on the same line)
        document.getElementById("glu").style.height=parseInt(height-document.getElementById("glu").offsetTop-8)+"px";
		//quick fix for Friefox redirecting bug
		if (document.getElementById("glu").src=="")
		{
			document.getElementById("glu").src="test.pdf";
		}
}
// this will resize the iframe every
// time you change the size of the window.
//window.onresize=resize_iframe; 
//Instead of using this you can use: 
//      <BODY onresize="resize_iframe()">

//-->
</script>
</head>
<body>
<IFRAME NAME="iframe1" id="glu" width="100%" onload="resize_iframe()"></IFRAME>
</body>
</html>

Open in new window


Live example here:

http://www.bosko.rs/ee/iframew100h100/

Regards
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
SameerMirzaAuthor Commented:
thanks.
Havnt tested the code yet but in example you have to refresh the page to get it working.
0
 
SameerMirzaAuthor Commented:
I am sorry but I have just tested the code in IE6 same result
0
 
SameerMirzaAuthor Commented:
nither in IE 7. Sorry for another comment but just wanted to confirm.
0
 
SameerMirzaAuthor Commented:
ok I am very sorry
problem is with pdf
It doesnt work with .pdf files.
Please have a look to confirm
try nay .pdf file as frame src.
0
 
R-ByterCommented:
I tested solution posted as live example in my previous post:

http://www.bosko.rs/ee/iframew100h100/

It works in IE7, IE8, Firefox, Chrome, Opera and Safari.
Don't know what could be the problem at your side. Did You copy and paste my code?

Regards
0
 
SameerMirzaAuthor Commented:
I have tried it and works but the porlbem is the spacing around the frame or padding in otherwords
so basically it leaves around 10px around it and place 6the iframe in the middle.
I have also tried,
html, body{
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
background-color: #ffffff; }

doesnt help much
0
 
R-ByterCommented:
Here you go, put this instead of <body>:

<body topmargin="0" leftmargin="0">

Open in new window


Be aware that I didnt use any css file since you didnt post it here.

Regards
0
 
SameerMirzaAuthor Commented:
Well it doesnt work without one
I tried using ur code as it is
0
 
SameerMirzaAuthor Commented:
it sems to work but still it leaves some space at the bottom. around 5 to 10px
0
 
SameerMirzaAuthor Commented:
It couldnt serve the purpose for me but I guess its alomost there.
I had to refresh it all the time to get it to work but may help some one
0
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

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