Full-screen iframe with a height of 100%
Is iframe height=100% supported in all browsers?
I am using doctype as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In my iframe code, if I say:
<iframe src="xyz.pdf" width="100%" height="100%" />
I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px) Is this supported in all major browsers (IE/Firefox/Safari) ?
Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox...How do I completely hide scrollbars and set the iframe height automatically?
You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
An alternative:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
To hide scrolling with 2 alternatives as shown above:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack with the second example:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!
3 approaches for creating a fullscreen iframe:
-
Approach 1 - Viewport-percentage lengths
In supported browsers, you can use viewport-percentage lengths such as
height: 100vh.Where
100vhrepresents the height of the viewport, and likewise100vwrepresents the width.Example Here
body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; }<iframe></iframe>
-
Approach 2 - Fixed positioning
This approach is fairly straight-forward. Just set the positioning of the
fixedelement and add aheight/widthof100%.Example Here
iframe { position: fixed; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }<iframe></iframe>
-
Approach 3
For this last method, just set the
heightof thebody/html/iframeelements to100%.Example Here
html, body { height: 100%; margin: 0; /* Reset default margin on the body element */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ width: 100%; height: 100%; }<iframe></iframe>
1. Change your DOCTYPE to something less strict. Don't use XHTML; it's silly. Just use the HTML 5 doctype and you're good:
<!doctype html>
2. You might need to make sure (depends on the browser) that the iframe's parent has a height. And its parent. And its parent. Etc:
html, body { height: 100%; }
I ran into the same problem, I was pulling an iframe into a div. Try this:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
The height is set to 100vh which stands for viewport height. Also, the width could be set to 100vw, although you'll likely run into problems if the source file is responsive (your frame will become very wide).
This worked very nicely for me (only if iframe content comes from the same domain):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>