iFrame Height Auto (CSS)

Question

I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.

I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!

Here is my CSS. For the frame...

#frame {
  position: relative;
  overflow: hidden;
  width: 860px;
  height: 100%;
}

And then for the frame's page.

#wrap {
  float: left;
  position: absolute;
  overflow: hidden;
  width: 780px;
  height: 100%;
  text-align: justify;
  font-size: 16px;
  color: #6BA070;
  letter-spacing: 3px;
}

The page's coding looks like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ��         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <div id="container">    
    <div id="header">
    </div>

  <div id="navigation"> 
    <a href="/" class="navigation">home</a>
    <a href="about.php" class="navigation">about</a>
    <a href="fanlisting.php" class="navigation">fanlisting</a>
    <a href="reasons.php" class="navigation">100 reasons</a>
    <a href="letter.php" class="navigation">letter</a>
  </div>
  <div id="content" >
    <h1>Update Information</h1>
    <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
  </div>
  <div id="footer">
  </div>
</div>
</body>
</html>

Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.

Can anyone help?

http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using — Adriano Resende, May 13 '15 at 14:10

score 42 · Answer 1 · edited Dec 03 '17 at 13:08

I had this same issue but found the following that works great:

The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.

Here is what a typical YouTube embed code looks like, with fixed width and height:

 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen></iframe>

It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):

 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>

And use the following CSS:

 .container {
    position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
 }
 .video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

Here is the page I found the solution on:

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.

This just makes the height static relative to the width it doesn't make the height automatically adjust for the height of the content. — Mike, May 24 '19 at 22:52
So many upvotes, but this doesn't accomplish what op asked for. — Madbreaks, Aug 10 '21 at 18:58

score 12 · Answer 2 · answered Jun 22 '18 at 07:16

12

This is my PURE CSS solution :)

Add, scrolling yes to your iframe.

<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>

The trick :)

<style>
    html, body, iframe { height: 100%; }
    html { overflow: hidden; }
</style>

You don't need to worry about responsiveness :)

answered Jun 22 '18 at 07:16

Benjoe

466
5
20

2

@P.James: did it *actually* expand the iframe for you? I'd be shocked... – Sz. Aug 29 '19 at 23:48
On the time I comment this, this is actually working. Or it depends on your structure. But this do the trick with me. – Benjoe Nov 26 '19 at 06:36
changing html with an additional attribute is not pure css – allanberry Jun 24 '22 at 14:39
Also, this doesn't work. The iframe stays the same height. – Greg Aug 01 '23 at 16:00

score 4 · Answer 3 · edited Dec 03 '17 at 13:08

4

hjpotter92

Add this to your section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

It is posted Here

It does however use javascript, but it is simple and easy to use code that will fix your problem.

edited Dec 03 '17 at 13:08

Pedram

15,766
10
44
73

answered Dec 02 '16 at 12:09

Casper Spruit

944
1
13
31

4

I have a similar solution working for an iframe with source within the same domain as the host, but where iframe host and source are from different domains, this solution may not work because of cross-site scripting restrictions. – Matthew Slyman Jan 05 '17 at 20:01
I've had better results getting the `scrollHeight` of `document.scrollingElement` than `document.body`. – aldel Aug 13 '19 at 18:47
This doesn't work. There are security restrictions on iFrames. – jscul Jul 30 '20 at 18:59

score 3 · Answer 4 · answered Dec 14 '16 at 11:32

3

@SweetSpice, use position as absolute in place of relative. It will work

#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}

answered Dec 14 '16 at 11:32

Paritosh

31
5

you should add position:relative to the parent – Mawardy Jul 19 '20 at 16:55
Yes, **position: relative;** is already there in **.container** class - @Mawardy – Paritosh Sep 14 '22 at 08:01

score 0 · Answer 5 · answered Dec 16 '16 at 08:59

 <div id="content" >
    <h1>Update Information</h1>
    <div id="support-box">
        <div id="wrapper">
            <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
        </div>
    </div>
  </div>
 #support-box {
        width: 50%;
        float: left;
        display: block;
        height: 20rem; /* is support box height you can change as per your requirement*/
        background-color:#000;
    }
    #wrapper {
        width: 90%;
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
         background:#ddd;
       margin:auto;
       height:100px; /* here the height values are automatic you can leave this if you can*/

    }
    #wrapper iframe {
        width: 100%;
        display: block;
        padding:10px;
        margin:auto;
    }

https://jsfiddle.net/umd2ahce/1/

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! — kayess, Dec 16 '16 at 09:21
Thank you for your valuable suggestion. Yes you are right "answering the question for readers in the future". I will try to fine tune my answer — Imran Mohammed, Dec 16 '16 at 13:41

score -1 · Answer 6 · edited Dec 03 '17 at 13:08

-1

You have to use absolute position along with your desired height. in your CSS, do the following:

#id-of-iFrame {
    position: absolute;
    height: 100%;
}

edited Dec 03 '17 at 13:08

Pedram

15,766
10
44
73

answered Jun 02 '15 at 18:37

Peter Soxx

11
2

1

height:100%; — this says the height of the iframe should be 100% of the width of the containing element in the iframe's host page (not, for example, 100% of the height of the content of the iframe's source page). In any case, I have tried this, and it does not work for me. – Matthew Slyman Jan 05 '17 at 20:06
@MatthewSlyman 100% of the *width*? Assume you meant "height" there – Madbreaks Aug 10 '21 at 18:57
No, percentages are treated not as a percentage of the same variable or similarly oriented dimension within the root or parent object (check which if you need clarification)... Rather they are treated (unintuitively) effectively as a unit of measurement, defined by width of container (?) divided by 100. If you want to define any dimension (height or width or anything else) by the height of a parent object, you will need to use for example "vh" units instead. – Matthew Slyman Sep 08 '21 at 03:38
1

@MatthewSlyman I don't think that's true: https://codepen.io/Alynva/pen/OJjpwPy – Alynva Oct 25 '21 at 21:09
Interesting counter-example! I distinctly remember struggling with this issue some years ago, so maybe something has changed, or the root cause of the issue was different to what I surmised, or the issue occurs under different conditions. – Matthew Slyman Feb 21 '22 at 05:42

score -1 · Answer 7 · edited Dec 03 '17 at 13:07

You should note that div tag behaves like nothing and just let you to put something in it. It means that if you insert a paragraph with 100 lines of text within a div tag, it shows all the text but its height won't change to contain all the text.

So you have to use a CSS & HTML trick to handle this issue. This trick is very simple. you must use an empty div tag with class="clear" and then you will have to add this class to your CSS. Also note that your have #wrap in your CSS file but you don't have any tag with this id. In summary you have to change you code to something like below:

HTML Code:

    <!-- Change "id" from "container" to "wrap" -->
    <div id="wrap">    
        <div id="header">
        </div>

        <div id="navigation"> 
            <a href="/" class="navigation">home</a>
            <a href="about.php" class="navigation">about</a>
            <a href="fanlisting.php" class="navigation">fanlisting</a>
            <a href="reasons.php" class="navigation">100 reasons</a>
            <a href="letter.php" class="navigation">letter</a>
        </div>
        <div id="content" >
            <h1>Update Information</h1>
            <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>

            <!-- Add this line -->
            <div class="clear"></div>
        </div>
        <div id="footer">
        </div>

        <!-- Add this line -->
        <div class="clear"></div>
    </div>

And also add this line to your CSS file:

.clear{ display: block; clear: both;}

This explanation of `div` height isn't right - it's describing what happens when an element contains floated children (the height collapses). In the example (`div` containing 100 lines of text), the `div` would grow in height to contain all the text. — Ben Hull, May 15 '18 at 23:13

score -4 · Answer 8 · edited Dec 03 '17 at 13:09

-4

According to this post

You need to add the !important css modifier to your height percentages.

Hope this helps.

edited Dec 03 '17 at 13:09

Pedram

15,766
10
44
73

answered Jun 11 '14 at 08:28

Vaughn Dabney

94
8

1

The heights work just fine without the `!important` tag. That doesn't change the auto though. – SweetSpice Jun 11 '14 at 08:46
Oh I guess I misunderstood your question. Didn't you state that the height:100% wasn't working properly? Did you try that without using 'auto' at all? @SweetSpice – Vaughn Dabney Jun 11 '14 at 08:56
yes. I tried auto AND 100%. Both separately. I also tried both with the `!important` tag and without. – SweetSpice Jun 11 '14 at 09:08

iFrame Height Auto (CSS)

8 Answers8

Linked