Menu
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 : http://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: http://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!
392
You can change this behaviour in your own Firefox installation by typing about:config in the address bar and setting security. mixed_content. block_active_content to false .
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio.
Follow these simple steps: Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100% Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
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>
try this in ur css:
iframe { display:block; width:100%; border:none;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
