CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxiframe
YourFriend
YourFriend

Reputation: 410

Fullsize IFrame in firefox?

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.sstatic.net/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.sstatic.net/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!

Upvotes: 5

Views: 5757

Answers (2)

Chris Morris
Chris Morris

Reputation: 316

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>

Upvotes: 8

Dhwani
Dhwani

Reputation: 7626

try this in ur css:

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

Upvotes: 1

Related Questions