ansaurus

Question

Fill window with iFrame and not show scrollbars?

Answer 1

A:

Can't you use the CSS property of overflow:hidden ?

Kezzer 2010-02-02 12:29:59

No, it doesn't seem to work; html { overflow:hidden; } ? The scrollsbars are removed and it seems to work perfectly in IE6, but the iframe doesn't fill the window in Firefox.

Zolomon 2010-02-02 12:39:46

Answer 2

+1 A:

You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:

<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
}
#iframe1 {
    position:absolute;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 100%;
}
</style>

<iframe id="iframe1" name="iframe1" frameborder="0"  
     src="theSiteToShow.html"></iframe>

Your frame margins should be set in the body of theSiteToShow.html.

UPDATE
Following your comment, I used the following as a test page:

<html> 
<head>
<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
}
#iframe1 {
    position:absolute;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 100%;
}
</style>
</head> 
<body> 
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body> 
</html>

Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.

Andy E 2010-02-02 12:43:05

The iframe won't fill the window. It will place itself at 0,0 in the top left hand corner and be at around 300x150px in size. What's missing? Feels like it should fill the window.

Zolomon 2010-02-02 13:08:29

@Zolomon: My code works fine for me in IE, Firefox and Chrome. Maybe you could copy the test code I wrote and use that as a base to build your own code from?

Andy E 2010-02-02 13:46:23

Thank you, your examples works! Don't know what was wrong with mine.

Zolomon 2010-02-04 12:20:55

ansaurus

tags:

views:

answers:

Fill window with iFrame and not show scrollbars?

related questions