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é.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>