iFrame Height Auto (CSS)

html css iframe height

151,764

Solution 1

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.

Solution 2

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

Solution 3

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

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

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

View more solutions

151,764

Author by

SweetSpice

My name is Jinnienn, I'm a mother of two little girls - Allicia and Kimiko. I'm engaged to the love of my life, Kevin. We're an expanding family. I blog randomly about a little bit of everything. My hobbies include fan listings, solving problems, crafting, and writing. I am not an impressive writer.

Updated on July 09, 2022

Comments

SweetSpice almost 2 years

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?

SweetSpice almost 10 years

The heights work just fine without the !important tag. That doesn't change the auto though.
Vaughn Dabney almost 10 years

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
SweetSpice almost 10 years

yes. I tried auto AND 100%. Both separately. I also tried both with the !important tag and without.
kayess over 7 years

While this code snippet may solve the question, including an explanation 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!
Immran Mohammed over 7 years

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
Matthew Slyman over 7 years

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

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.
Ben Hull almost 6 years

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.
Dustin Nieffenegger about 5 years

Please note that <iframe frameborder=""> was deprecated in HTML5.
Mike almost 5 years

This just makes the height static relative to the width it doesn't make the height automatically adjust for the height of the content.
aldel over 4 years

I've had better results getting the scrollHeight of document.scrollingElement than document.body.
Sz. over 4 years

@P.James: did it actually expand the iframe for you? I'd be shocked...
Benjoe over 4 years

On the time I comment this, this is actually working. Or it depends on your structure. But this do the trick with me.
Mawardy almost 4 years

you should add position:relative to the parent
jscul almost 4 years

This doesn't work. There are security restrictions on iFrames.
Madbreaks over 2 years

@MatthewSlyman 100% of the width? Assume you meant "height" there
Madbreaks over 2 years

So many upvotes, but this doesn't accomplish what op asked for.
Matthew Slyman over 2 years

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.
Alisson Nunes over 2 years

@MatthewSlyman I don't think that's true: codepen.io/Alynva/pen/OJjpwPy
Matthew Slyman about 2 years

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.
aljabear almost 2 years

changing html with an additional attribute is not pure css