Geek Answers Handbook

Fill iFrame and not show scrollbars?

How can I make my iframe fill the window and not display scrollbars?

This works for IE6, I would like to make it work for all browsers, if possible:

<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe> <script type="text/javascript"> function resizeIframe() { var height = document.documentElement.clientHeight; height -= document.getElementById('frame').offsetTop; // not sure how to get this dynamically height -= 20; /* whatever you set your body bottom margin/padding to be */ document.getElementById('frame').style.height = height +"px"; }; document.getElementById('frame').onload = resizeIframe; window.onresize = resizeIframe; </script>
+7
html css iframe
source share
2 answers

You should be able to do this using only CSS, without the 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>

Frame fields must be set in theSiteToShow.html body.

UPDATE
After your comment, I used the following 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 great and fills the whole window.

+19
source share

I had the same problems with scrollbars, as well as in the absence of a context menu, although all of these elements were disabled. A few days later, trying to solve them, I came across this message, which helped a little, but led me to search for a message about responsive web games with three code examples. Here are the links:

http://virtualplayground.d2.pl/?p=367#comment-224

Download package

Use the index file, if you need a blank sheet, replace the existing code in the exported .html file (from Unity export), replace the link 'unityObject.embedUnity' with your own link to your .html file located on your server.

To insert a player into your page using iframe add:

Lock and load.

Hope this helps.

^ _ ^

0
source share

More articles:


All Articles