I have embedded several html files that vary in "height". I want the embedded content to always fill the parent div so that I can scroll the parent instead of the embedded content.
If I set a specific height for the content wrapper that is larger than the height of the embedded content, it works. The only problem is that the specific height doesn't match the other embedded html files due to different content and leaves a lot of dead space. How can I make the content wrapper scale to the height of the embedded content?
<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%;
}
I tried setting the height of the embedded content and content wrapper to 100% or automatic, but neither worked.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I solved my problem by using javascript to set the iframe's height to the height of its content, using this website: https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height- according-to-its-content-usage-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>