Full-screen iframe with a height of 100%

Asked 3/5, 2011 at 10:9 Answered 4/11, 2022 at 12:8

Solved javascript html css iframe html-frames

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?

Monophyletic answered 3/5, 2011 at 10:9 Comment(5)

See actually I do not have all the browsers installed..Also different versions..also just wanted to ensure that it is kind of standard.. – Monophyletic 3/5, 2011 at 10:22

You could also try it in a css validator. – Breed 3/5, 2011 at 10:27

Yes, that does not give any error/warning...But my question is do all browsers actually apply 100% height? – Monophyletic 3/5, 2011 at 10:29

For me this answer worked fine: #5273019 – Russom 11/9, 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%; }

– Weekly 15/6, 2023 at 13:21

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!

Mylo answered 3/5, 2011 at 10:41 Comment(12)

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%" – Monophyletic 3/5, 2011 at 11:26

Also only IE is not taking 100% height (takes around 200px ht)...FF and Safri take all the remaining height.. – Monophyletic 3/5, 2011 at 12:19

@Boris Zbarsky Yeah, thanks for letting me know that! I've updated the post now!! @hmthr Your first question relating the double tags is because earlier browsers do take the "height" and "width" tags but don't work well with the style tags! About the IE bug, I would prefer you to stick with the first code for that case. – Mylo 3/5, 2011 at 15:1

I've just made a change to the second code which seems to clear up the 200px bug in IE. I was seeing a gap on the right hand side. Now it is clear! – Mylo 3/5, 2011 at 15:3

To hide the scrollbars you can see this: #1692373 – Mylo 3/5, 2011 at 15:11

There you go, most likely the final edit! It is all set and working. iFrame width and height to cover 100% of the web browser area / working area and the scrollbars are hidden by pushing them outside the bounds of the BODY. Thanks and it was great helping you! :D – Mylo 3/5, 2011 at 15:16

@hmthr Your question "Is iframe height=100% supported in all browsers", the answer is most probably yes (this code provided above works in all browsers that you want it to work!) and the next question "How do I completely hide scrollbars?" can be shown by the last to code pieces which hide the scroll bars! :D – Mylo 3/5, 2011 at 15:26

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. – Reiko 2/11, 2011 at 7:10

This only works in quirks mode. Doesn't work in Standards mode. To make it work in standards mode you have to set the height on HTML and BODY to 100% also. – Meath 6/11, 2012 at 7:52

FYI "HTML <frameset> Tag. Not Supported in HTML5." - ref. w3schools.com/tags/tag_frameset.asp. – Merely 4/12, 2018 at 9:19

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 – Chartist 24/11, 2020 at 22:24

some can't touch body, wrong code – Mizzenmast 21/4, 2022 at 15:26

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>

Gunpaper answered 9/1, 2015 at 4:28 Comment(3)

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. – Aldin 30/7, 2015 at 14:34

adding display: block did the trick to prevent having a double-scrollbar – Gibbeon 18/6, 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 – Zane 26/4, 2021 at 12:1

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

Aldin answered 30/7, 2015 at 14:37 Comment(3)

seamless is not supported in any browser as far as i know – Azilian 17/8, 2015 at 7:25

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! – Eternal 27/1, 2020 at 21:43

I got a double-scrollbar using this solution but otherwise it worked – Azote 17/9, 2021 at 15:43

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

Tetanic answered 3/5, 2011 at 15:26 Comment(3)

The important part here for me was that the html and body tag needed height:100%. Thanks. – Reiko 2/11, 2011 at 7:4

Setting just body works in Chrome, but not in other browsers. – Laveta 17/4, 2014 at 6:1

Here are 2 alternative approaches. – Gunpaper 13/1, 2015 at 5:23

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>

Arakawa answered 7/9, 2012 at 4:22 Comment(3)

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. – Splinter 4/11, 2012 at 13:4

Took a little to make this work inside of Wordpress, I just added a shortcode in my plugin. WORKS LIKE A CHARM. – Riccio 10/3, 2014 at 16:59

It works. but the problem is that it will not be recalculate the height on each inner iframe postback. Is there any workaround ? – Westonwestover 2/8, 2015 at 7:33

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

</iframe>

Miss answered 17/4, 2020 at 18:47 Comment(0)

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>

Fortification answered 15/12, 2016 at 10:21 Comment(0)

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

Emulation answered 27/2, 2017 at 20:22 Comment(0)

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>

Incalescent answered 10/8, 2018 at 2:43 Comment(2)

There are 14 other answers already here. Can you explain how your answer is better or at least different from the 14 others? – Lovettalovich 10/8, 2018 at 3:2

I tried this and some very interesting results came up. The parent frame and iFrame were merged together! – Dissimulate 17/3, 2021 at 20:7

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

Facile answered 8/1, 2021 at 10:32 Comment(0)

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>

Freyah answered 25/4, 2016 at 18:0 Comment(0)

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>

Desideratum answered 6/12, 2016 at 15:45 Comment(0)

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>

Helprin answered 12/2, 2013 at 7:59 Comment(0)

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/

Beekeeper answered 30/10, 2014 at 1:29 Comment(0)

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>

Asceticism answered 2/8, 2022 at 15:46 Comment(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>

Aplanospore answered 18/10, 2015 at 9:42 Comment(1)

Please note, you might need some javascript for Firefox. There is common issue with iframe height on Firefox. – Aplanospore 1/11, 2015 at 21:28

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

Ventilator answered 2/12, 2017 at 16:31 Comment(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

Hobnail answered 13/6, 2018 at 10:35 Comment(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=...>

Rolanderolando answered 5/5, 2020 at 12:56 Comment(0)

Try this using jquery,

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

Goingson answered 4/11, 2022 at 12:8 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

3 approaches for creating a fullscreen iframe:

Approach 1 - Viewport-percentage lengths

Approach 2 - Fixed positioning

Approach 3

Another way to build fluid full screen iframe:

Embedded video fills entire viewport area when page loads

Example:

Recommended topics

Hot tags

3 approaches for creating a fullscreen `iframe`:

Another way to build fluid full screen `iframe`:

Embedded video fills entire `viewport` area when page loads