329

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?

5
  • 21
    See actually I do not have all the browsers installed..Also different versions..also just wanted to ensure that it is kind of standard.. May 3, 2011 at 10:22
  • 1
    You could also try it in a css validator.
    – Ruben
    May 3, 2011 at 10:27
  • 8
    Yes, that does not give any error/warning...But my question is do all browsers actually apply 100% height? May 3, 2011 at 10:29
  • For me this answer worked fine: stackoverflow.com/questions/5272519/…
    – Zied Hamdi
    Sep 11, 2014 at 18:34
  • I finally found the answer to that question that actually works : - Position the iframe in the top left corner of the div. - Make it 100% of the height and width of the div. - Add padding to the top of the div equal to the aspect ratio of the iframe (for HD videos, 56.25%, or 9 / 16 * 100). .responsive-iframe { max-width: 100%; padding-top: 56.25%; position: relative; width: 100%; } .responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    – ZAA.CC
    Jun 15, 2023 at 13:21

20 Answers 20

351

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!

12
  • 3
    Sounds good..Just one question though...Why do we need to use style="height:100%;width:100%;" when we are anyways saying iframe height="100%" width="100%" May 3, 2011 at 11:26
  • 1
    Also only IE is not taking 100% height (takes around 200px ht)...FF and Safri take all the remaining height.. May 3, 2011 at 12:19
  • 20
    To get the iframe to properly use 100% the parent needs to be 100%. In newer doctypes the html and body tag are not automatically 100%. When I added height:100% for html and body then it worked flawlessly. So, the correct answer for the question, I think, is the answer from rudie, except that I had to keep my xhtml doctype. Also, note that the overflow rules are then not necessary. Scrollbars then work as intended - automatically.
    – Spiralis
    Nov 2, 2011 at 7:10
  • 3
    FYI "HTML <frameset> Tag. Not Supported in HTML5." - ref. w3schools.com/tags/tag_frameset.asp.
    – Zeek2
    Dec 4, 2018 at 9:19
  • 1
    width and height are digits without units. They are in pixels. width="100%" is not valid HTML5. developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
    – djibe
    Nov 24, 2020 at 22:24
219

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;
    }
    <iframe></iframe>


  • 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%;
    }
    <iframe></iframe>


  • 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%;
    }
    <iframe></iframe>

3
  • 5
    I ended up using a variation of option 1... I used width:100% and height:100vh because the source I was pulling was pretty wide and the iframe is contained in a div. Excellent solution. Thank you.
    – NotJay
    Jul 30, 2015 at 14:34
  • 5
    adding display: block did the trick to prevent having a double-scrollbar
    – KavenG
    Jun 18, 2017 at 15:51
  • One more approach could be found here (use padding-top: 100%; /* 1:1 Aspect Ratio */): w3schools.com/howto/howto_css_responsive_iframes.asp Apr 26, 2021 at 12:01
55

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

3
  • 3
    seamless is not supported in any browser as far as i know
    – VisualBean
    Aug 17, 2015 at 7:25
  • 2
    After spending more time than I'd care to admit fidgeting around with this problem, this is EXACTLy what I needed. Except instead of a website I used another HTML file, which required a minor adjustment to the viewport height and now it's good to go. Thank you! Jan 27, 2020 at 21:43
  • I got a double-scrollbar using this solution but otherwise it worked
    – Ogglas
    Sep 17, 2021 at 15:43
47

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%; }
3
  • 10
    The important part here for me was that the html and body tag needed height:100%. Thanks.
    – Spiralis
    Nov 2, 2011 at 7:04
  • 1
    Setting just body works in Chrome, but not in other browsers.
    – Dingle
    Apr 17, 2014 at 6:01
  • Here are 2 alternative approaches. Jan 13, 2015 at 5:23
37

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>
3
  • 28
    This will only work if the iframe src is on the same domain as the parent page, otherwise you will get a permission denied error on contentWindow.document.
    – wolfyuk
    Nov 4, 2012 at 13:04
  • 1
    Took a little to make this work inside of Wordpress, I just added a shortcode in my plugin. WORKS LIKE A CHARM.
    – Andy
    Mar 10, 2014 at 16:59
  • 1
    It works. but the problem is that it will not be recalculate the height on each inner iframe postback. Is there any workaround ?
    – Behrouz.M
    Aug 2, 2015 at 7:33
13
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
10

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>

0
8

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

0
6

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>
2
  • 5
    There are 14 other answers already here. Can you explain how your answer is better or at least different from the 14 others?
    – Stephen Rauch
    Aug 10, 2018 at 3:02
  • 1
    I tried this and some very interesting results came up. The parent frame and iFrame were merged together! Mar 17, 2021 at 20:07
6

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

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

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

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

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/

1

if your parent <div> fill the height with the multiple solution mentionned here.

Then you could also use something like

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>
0

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>

1
  • Please note, you might need some javascript for Firefox. There is common issue with iframe height on Firefox.
    – D.A.H
    Nov 1, 2015 at 21:28
0

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"));

or

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

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

0

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=...>
0

Try this using jquery,

$('iframe').on('`enter code here`load', function(){
   $(this).css('height', $(this).contents().find('body').height());
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.