INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

IFrame 100% height nightmare

IFrame 100% height nightmare

(OP)
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

RE: IFrame 100% height nightmare

This works for me on both Chrome and FF.

CODE --> 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="http://www.wikipedia.org" 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

RE: IFrame 100% height nightmare

If the iframe is 100%, why not just put the original code there instead?

Keith
www.studiosoft.co.uk

RE: IFrame 100% height nightmare

Quote:

If the iframe is 100%, why not just put the original code there instead?

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

RE: IFrame 100% height nightmare

I was suggesting removing the iframe altogether as the requirement is to have it behave like a normal body element.

Keith
www.studiosoft.co.uk

RE: IFrame 100% height nightmare

Quote (audiopro)


I was suggesting removing the iframe altogether as the requirement is to have it behave like a normal body element.

Not quite:

Quote (1DMF)


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.



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

RE: IFrame 100% height nightmare

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

Keith
www.studiosoft.co.uk

RE: IFrame 100% height nightmare

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

RE: IFrame 100% height nightmare

(OP)
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?

Quote:

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

No worries Keith, it's simply the new way of running Perl CGI applications http://plackperl.org/

Quote:

PSGI - Perl Web Server Gateway Interface
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

RE: IFrame 100% height nightmare

(OP)

Quote:

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?
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

RE: IFrame 100% height nightmare

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close