[html] iFrame Height Auto (CSS)

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

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

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

  <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 id="content" >
    <h1>Update Information</h1>
    <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
  <div id="footer">

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?

This question is related to html css iframe height

The answer is

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>

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:


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

Similar questions with html tag:

Similar questions with css tag:

Similar questions with iframe tag:

Similar questions with height tag: