Coder Perfect

Full-screen iframe with a 100 percent height

Category: javascript

Tag: , , ,

Problem

Are all browsers compatible with iframe height=100%?

I’m using doctype as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If I mention in my iframe code:

<iframe src="xyz.pdf" width="100%" height="100%" />

Is this supported in all major browsers (IE/Firefox/Safari)? Will it actually take the height of the remaining page (since there is another frame on top with a fixed height of 50px)?

Also regarding scrollbars, even though I say scrolling=”no”, I can see disabled scrollbars in Firefox… How can I remove all scrollbars and automatically adjust the iframe height?

Asked by copenndthagen

Solution #1

You might use frameset, as suggested in the previous response, but if you insist on utilizing iFrames, the two examples below should suffice:

<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>

Scrolling can be disabled in two ways, as indicated 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>

Using the second example as an 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 conceal the iFrame’s scrollbars, the parent is set to overflow: hidden, and the iFrame is set to go up to 150 percent width and height, forcing the scrollbars beyond the page. Since the body doesn’t have scrollbars, one might not expect the iframe to go beyond the page’s borders. The scrollbars of the iFrame with full width are now hidden!

Answered by Axe

Solution #2

Answered by Josh Crozier

Solution #3

1. Modify your DOCTYPE to be less restrictive. It’s pointless to use XHTML. You’re good to go if you use the HTML 5 doctype:

<!doctype html>

2. Depending on the browser, you may need to ensure that the iframe’s parent has a height. As well as its parent. As well as its parent. Etc:

html, body { height: 100%; }

Answered by Rudie

Solution #4

I had the identical issue when I tried to insert an iframe into a div. Consider the following:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

The viewport height is set to 100vh, which equals the height of the viewport. Also, the width might be adjusted to 100vw, but if the source file is responsive, you’ll probably run into issues (your frame will become very wide).

Answered by NotJay

Solution #5

This worked great for me (but only if the iframe content was 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>

Answered by Ivan

Post is based on https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100