Home/ Questions/Q 9259877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:45:40+00:00

I am having problems with Iframes and Firefox. Basically, I am embedding an IFrame

  • 0

I am having problems with Iframes and Firefox. Basically, I am embedding an IFrame into a site for it take up the whole body area. It works perfectly with Google chrome as you can see here. The I-frame takes up all the body area, no scrollbars needed to navigate the iframe.

chrome : https://i.stack.imgur.com/muo3U.png

But in firefox it doesn’t work correctly. As you can see here, only a part of the iframe is visible and the scrollbars (they are invisible but scrolling works) must be used to navigate the iframe. It is very unappealing for the purpose of my website.

Firefox: https://i.stack.imgur.com/6Vm1O.png

So I’m wondering how I could get this to work? I have searched and searched and all the solutions I try end up not working.

Here’s my code and others I’ve have tried.

http://pastebin.com/rmdcnLuw

Thanks for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set your body and html elements to height: 100%

    Try something like this:

    <html style="height: 100%">
<body style="height: 100%">
    <div style="width:100%; height:100%; background-color:transparent;">
    <iframe src="http://www.google.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
  </div>
</body>
</html>

    Better yet, add those rules to your CSS file as such:

    body, html { height: 100%; }

    You could also try this:

    CSS:

    html, body { height: 100%; }
iframe { width: 100%; height: 100%; }

    HTML:

    <html>
<body>
      <iframe src="http://www.google.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

    Alternative which moves frameborder and scrolling to the CSS

    border: none; removes the border on the iframe, while overflow: hidden; disables scrolling and hides any content that’s cut off the page (like your original code).

    CSS:

    html, body { height: 100%; overflow: hidden; }
iframe { width: 100%; height: 100%; border: none; overflow: hidden; }

    HTML:

    <html>
<body>
      <iframe src="http://en.wikipedia.org"></iframe>
</body>
</html>
    • 0