Solved

Iframe - width 100%, height 100%

Posted on 2011-03-03
13
1,121 Views
Last Modified: 2012-08-13
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
Comment
Question by:SameerMirza
  • 9
  • 4
13 Comments
 
LVL 14

Expert Comment

by:R-Byter
ID: 35027988
Is this what you are looking for:

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

Regards
0
 

Author Comment

by:SameerMirza
ID: 35028368
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
 
LVL 14

Accepted Solution

by:
R-Byter earned 500 total points
ID: 35029369
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
 

Author Comment

by:SameerMirza
ID: 35029696
thanks.
Havnt tested the code yet but in example you have to refresh the page to get it working.
0
 

Author Comment

by:SameerMirza
ID: 35029789
I am sorry but I have just tested the code in IE6 same result
0
 

Author Comment

by:SameerMirza
ID: 35029845
nither in IE 7. Sorry for another comment but just wanted to confirm.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:SameerMirza
ID: 35030089
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
 
LVL 14

Expert Comment

by:R-Byter
ID: 35034792
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
 

Author Comment

by:SameerMirza
ID: 35036851
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
 
LVL 14

Expert Comment

by:R-Byter
ID: 35036893
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
 

Author Comment

by:SameerMirza
ID: 35037718
Well it doesnt work without one
I tried using ur code as it is
0
 

Author Comment

by:SameerMirza
ID: 35038036
it sems to work but still it leaves some space at the bottom. around 5 to 10px
0
 

Author Closing Comment

by:SameerMirza
ID: 35058104
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
updateParent() HTML Javascript 21 61
Ajax control editor 4 34
jQuery CSS Scroll Issue 3 32
while loop in html mail format 5 32
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now