简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Intégrer/iframe toujours en pleine hauteur

J'ai intégré plusieurs fichiers html qui ont des "hauteurs" différentes. Je souhaite que le contenu intégré remplisse toujours le div parent afin de pouvoir faire défiler le parent au lieu du contenu intégré.

Si je définis une hauteur spécifique pour le wrapper de contenu qui est supérieure à la hauteur du contenu intégré, cela fonctionne. Le seul problème est que la hauteur spécifique ne correspond pas aux autres fichiers HTML intégrés en raison d'un contenu différent et laisse beaucoup d'espace mort. Comment puis-je adapter le wrapper de contenu à la hauteur du contenu intégré ? 

<body onload="mathSubject()">
  <div class="nav">
      
  </div>
    
  <div class="content-wrapper">
      <embed id="embedded-content" type="text/html" src="content.html">
  </div>
</body>
.content-wrapper{
    width: 80vw;
    height: 90vh;
    margin-left: auto;
    margin-right: auto;
}

#embedded-content{
  width: 100%;
  height: 100%;
}

J'ai essayé de régler la hauteur du contenu intégré et du wrapper de contenu à 100 % ou automatiquement, mais aucun n'a fonctionné.

P粉021553460P粉021553460182 Il y a quelques jours418

répondre à tous(1)je répondrai

  • P粉741223880

    P粉7412238802024-04-01 09:30:55

    J'ai résolu mon problème en utilisant javascript pour définir la hauteur de l'iframe à la hauteur de son contenu, en utilisant ce site : https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height-according-to-its -content-using-javascript.php

    <style>
iframe{
    width: 100%;
    border: 2px solid #ccc;
}
</style>

<iframe src="demo.php" id="myIframe"></iframe>

<script>
// Selecting the iframe element
var iframe = document.getElementById("myIframe");

// Adjusting the iframe height onload event
iframe.onload = function(){
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

    répondre
    0
  • Annulerrépondre