Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IFrame 100% height nightmare 2

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
0
0
GB
Hi,

I seem unable to find the right way to have an iframe that is 100% tall / wide and works like a body normally would.

I know that an iframe based on the body that has no fixed height means it has nothing to base the 100% height on.

I've tried
Code: 
body {
  margin: 0;
  padding: 0;
  height:1000px;
  overflow:scroll;
}

iframe {
    width:100%;
    height:100%;  
    overflow:hidden;    
    display:block; 
    }

but that creates two scroll bars.

I've tried giving the body a stupid height with overflow scroll on the body and the iframe overflow hidden and vice versa, nothing works like I want and all because annoyingly FF won't let you remove the address bar from popup windows.

Some of our new shinny HTML5 members area is being launched over a new MVC PSGI application, while some of the old legacy CGI stuff is to be skinned not ported over, so I don't want the old URL's showing in the address bar, they cannot simply visit them as a standard URL.

So I created a page in the new system that needs to be a full size 100% height/width iframe so it looks like it is the actual page of the app as if it was a full normal URL and has a page down scroll bar that works properly and only one!.

Howe do you achieve this?

Thanks,
1DMF.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Sort by date Sort by votes
This works for me on both Chrome and FF.
HTML: 
<! DOCTYPE HTML>
<html>
<head>
	<title>iFrame Test</title>
	<style type="text/css">
		html,body
		{
			height:100%;
			width:100%;
			overflow:hidden;	
			padding:0;
			margin:0;	
		}
	</style>
</head>
	<body>
		<iframe src="[URL unfurl="true"]http://www.wikipedia.org"[/URL] width="100%" height="100%"></iframe>
	</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
If the iframe is 100%, why not just put the original code there instead?
Click to expand...

It has to have something to be 100% of.

So both the HTML & BODY elements have to be the full height of the viewport which has an explicit height to be 100% of when the document is rendered.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
audiopro said:
I was suggesting removing the iframe altogether as the requirement is to have it behave like a normal body element.
Click to expand...

Not quite:

1DMF said:
Some of our new shinny HTML5 members area is being launched over a new MVC PSGI application, while some of the old legacy CGI stuff is to be skinned not ported over, so I don't want the old URL's showing in the address bar, they cannot simply visit them as a standard URL.
Click to expand...



1DMF doesn't want the url of the "content" of the iframe to be visible in the address bar, so he's putting it inside an iframe in a page with a different URL.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Nothing to do with the MVC PSGI application. More just the URL that's gong to be showing. It would work the same way with a standard HTML page who's URL you don't want to directly show for whatever reason.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Thanks Phil,

was it really that simple, all I had to do was include <html>
Code: 
html,body
{
	height:100%;
	width:100%;
	overflow:hidden;	
	padding:0;
	margin:0;	
}
		
iframe {
    width:100%;
    height:100%;  
    overflow:scroll;    
    display:block; 
}

Though still a little annoying in IE, as it shows the URL in the title bar in front of the actual page title. Is it possible to get rid of this?

Sorry, I wouldn't recognise an MVC PSGI application if it came up and bit me so I will leave you to it.
Click to expand...

No worries Keith, it's simply the new way of running Perl CGI applications
PSGI - Perl Web Server Gateway Interface
Click to expand...
and to achieve this I use the Perl Catalyst MVC framework. There are many out there to choose from, Dancer, Catalyst, Mojolicious.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
Though still a little annoying in IE, as it shows the URL in the title bar in front of the actual page title. Is it possible to get rid of this?
Click to expand...
well I refreshed the page a couple of times and now it just shows the page title as it should?

Sometimes I think I'm going mad!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
Glad its working now.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
45
SitesMasstec
SitesMasstec
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
60
caykamanj1966
caykamanj1966
PCHomepage
  • Locked
  • Question
iFrame Scrolling Without Body Scrolling
Replies
8
Views
210
PCHomepage
PCHomepage
Skippie1
  • Locked
  • Question
Google map iframe problem
Replies
1
Views
46
datamasher
datamasher
leo57
  • Locked
  • Question
anyone know how to center an image in an iframe?
Replies
5
Views
91
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top