recherche

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粉021553460239 Il y a quelques jours531

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