Full-screen iframe with a height of 100%

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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!

Solution 2 - Javascript

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 100vh represents the height of the viewport, and likewise 100vw represents 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; }

Approach 2 - Fixed positioning

This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

Example Here

iframe { position: fixed; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

Approach 3

For this last method, just set the height of the body/html/iframe elements to 100%.

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%; }

Solution 3 - Javascript

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

Solution 4 - Javascript

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%; }

Solution 5 - Javascript

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>

Solution 6 - Javascript

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>

Solution 7 - Javascript

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">
	
</iframe>

Solution 8 - Javascript

> <iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

Solution 9 - Javascript

The following tested working

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

Solution 10 - Javascript

Additional to the answer of Akshit Soota: it is importand to explicitly set the height of each parent element, also of the table and column if any:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
    
    
    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>

Solution 11 - Javascript

You first add css

html,body{
height:100%;
}

This will be the html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>

Solution 12 - Javascript

http://embedresponsively.com/

This is a great resource and has worked very well, the few times I've used it. Creates the following code....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Solution 13 - Javascript

Here is a concise code. It does relies on a jquery method to find the current window height. On load of iFrame it sets the height of the iframe be the same as the current window. Then to handle resizing of the page, the body tag has an onresize event handler which sets the iframe's height whenever the document is resized.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

here's a working sample: http://jsbin.com/soqeq/1/

Solution 14 - Javascript

#Another way to build fluid full screen iframe:

##Embedded video fills entire viewport area when page loads

Nice approach for landing pages with video or any embedded content. You can have any additional content below of embedded video, which is revealed when scrolling page down.

Example:

CSS and HTML code.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}

<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>

Solution 15 - Javascript

Only this worked for me (but for "same-domain"):

function MakeIframeFullHeight(iframeElement){
	iframeElement.style.width	= "100%";
	var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
	var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
	var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
	if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
	(function(){
	   var interval = setInterval(function(){
		if(ifrD.readyState  == 'complete' ){
			iframeElement.style.height	= (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
			setTimeout( function(){ clearInterval(interval); }, 1000 );
		} 
	   },1000)
	})();
}

you can use either:

MakeIframeFullHeight(document.getElementById("iframe_id"));

<iframe .... onload="MakeIframeFullHeight(this);" ....

Solution 16 - Javascript

As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe, percentage values are no longer allowed. But the following worked for me

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Though width:100% works, height:100% does not work. So window.innerHeight has been used. You can also use css pixels for height.

Working code: Link Working site: Link

Solution 17 - Javascript

You can can call a function which will calculate the iframe's body hieght when the iframe is loaded:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>
    
<iframe onload="iframeloaded()" src=...>

Solution 18 - Javascript

To get a full screen iframe without a scrollbar inside the iframe use the following css. Nothing more is required

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }

Content Type	Original Author	Original Content on Stackoverflow
Question	copenndthagen	View Question on Stackoverflow
Solution 1 - Javascript	Axe	View Answer on Stackoverflow
Solution 2 - Javascript	Josh Crozier	View Answer on Stackoverflow
Solution 3 - Javascript	NotJay	View Answer on Stackoverflow
Solution 4 - Javascript	Rudie	View Answer on Stackoverflow
Solution 5 - Javascript	Ivan	View Answer on Stackoverflow
Solution 6 - Javascript	khoa	View Answer on Stackoverflow
Solution 7 - Javascript	blueDexter	View Answer on Stackoverflow
Solution 8 - Javascript	Heitor Giacomini	View Answer on Stackoverflow
Solution 9 - Javascript	Uma Shankar Goel	View Answer on Stackoverflow
Solution 10 - Javascript	Brabbeldas	View Answer on Stackoverflow
Solution 11 - Javascript	Tariq Javed	View Answer on Stackoverflow
Solution 12 - Javascript	Tom Witherington	View Answer on Stackoverflow
Solution 13 - Javascript	BraveNewMath	View Answer on Stackoverflow
Solution 14 - Javascript	D.A.H	View Answer on Stackoverflow
Solution 15 - Javascript	T.Todua	View Answer on Stackoverflow
Solution 16 - Javascript	Agnel Vishal	View Answer on Stackoverflow
Solution 17 - Javascript	Tejpal Sharma	View Answer on Stackoverflow
Solution 18 - Javascript	Jiren	View Answer on Stackoverflow

Full-screen iframe with a height of 100%

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

3 approaches for creating a fullscreen `iframe`:

Approach 1 - Viewport-percentage lengths

Approach 2 - Fixed positioning

Approach 3

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Example:

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

Solution 18 - Javascript

libxml install error using pip

Disable intellij indexing on specific folder

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

3 approaches for creating a fullscreen iframe:

Approach 1 - Viewport-percentage lengths

Approach 2 - Fixed positioning

Approach 3

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Example:

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

Solution 18 - Javascript

libxml install error using pip

Disable intellij indexing on specific folder

Attributions

3 approaches for creating a fullscreen `iframe`: