简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Intégrer/iframe toujours en pleine hauteur
P粉021553460
P粉021553460 2024-03-31 09:50:18
0
1
410

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粉021553460
P粉021553460

répondre à tous(1)
P粉741223880
P粉7412238802024-04-01 09:30:55 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！