web-dev-qa-db-fra.com

iFrame Height Auto (CSS)

J'ai des problèmes avec mon iframe. Je souhaite vraiment que le cadre règle automatiquement les hauteurs en fonction du contenu de l'iframe. Je veux vraiment faire cela via le CSS sans JavaScript. Cependant, j'utiliserai javascript si j'en ai aussi.

J'ai essayé height: 100%; et height: auto;, etc. Je ne sais tout simplement pas quoi essayer!

Voici mon CSS. Pour le cadre ...

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

Et ensuite pour la page du cadre.

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

Le codage de la page ressemble à ceci ...

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

Veuillez noter que l'URL dans l'iframe est différent du site Web sur lequel l'iframe sera affiché. Cependant, j'ai accès aux deux sites Web.

Quelqu'un peut-il aider?

htmlcssiframeheight
25
SweetSpice

J'ai eu le même problème mais j'ai trouvé le suivant qui fonctionne très bien

La clé de la création d’une insertion YouTube réactive est l’utilisation de padding et d’un élément de conteneur, ce qui vous permet de lui donner un rapport hauteur/largeur fixe. Vous pouvez également utiliser cette technique avec la plupart des autres intégrations à base d'iframe, telles que les diaporamas.

Voici à quoi ressemble un code intégré YouTube, avec une largeur et une hauteur fixes:

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

Ce serait bien si nous pouvions simplement lui donner une largeur de 100%, mais cela ne fonctionnera pas car la hauteur reste fixe. Ce que vous devez faire est de l’envelopper dans un conteneur comme ceci (notez les noms de classe et supprimez la largeur et la hauteur):

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

Et utilisez le CSS suivant:

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

Voici la page sur laquelle j'ai trouvé la solution:

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

En fonction de vos proportions, vous devrez probablement ajuster le padding-bottom: 56.25%; pour obtenir la hauteur correcte.

23
Ryan

Ceci est ma solution CSS PURE :)

Ajouter, en faisant défiler oui à votre iframe.

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

L'astuce :)

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

Vous n'avez pas à vous soucier de la réactivité :)

3
Benjoe

hjpotter92

Ajoutez ceci à votre section:

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

Et changez votre iframe en ceci:

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

Il est posté ici

Il utilise cependant javascript, mais c'est un code simple et facile à utiliser qui résoudra votre problème.

1
Casper Spruit

@SweetSpice, utilisez position comme absolu au lieu de relatif. Ça va marcher

#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
0
Paritosh
 <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/

0
Immran Mohammed

Vous devez utiliser la position absolute avec votre hauteur désirée . Dans votre code CSS, procédez comme suit:

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