Geek asks and answers

Full-sized IFrame in firefox?

I have problems with iframe and Firefox. Basically, I embed an IFrame in a site because it occupies the entire area of ​​the body. It works great with Google Chrome, as you can see here. The I-frame occupies the entire body area, without the scroll bars needed to navigate the iframe.

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

But in firefox, this does not work correctly. As you can see here, only part of the iframe is visible, and scrollbars (they are invisible, but scrolls work) should be used to navigate the iframe. This is very unattractive for my website.

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

So I wonder how can I make this work? I searched and searched, and all the solutions that I am trying to end up failing.

Here is my code and others that I tried.

http://pastebin.com/rmdcnLuw

Thanks for any help!

+5
source share
2 answers

You need to install bodyand htmlelements << 22>

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 these rules to your CSS file as such:

body, html { height: 100%; }

You can also try the following:

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>

An alternative that moves frame borders and scrolls to CSS

border: none;removes the border in the iframe, but overflow: hidden;disables scrolling and hides any content that cuts the page (for example, your source 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>
+8
source

try this in ur css:

iframe { display:block; width:100%; border:none;}
+1
source

More articles:


All Articles