我嵌入了几个 html 文件，这些文件的“高度”各不相同。我希望嵌入的内容始终填充父级 div，以便我可以滚动父级而不是嵌入的内容。
如果我为内容包装器设置一个特定的高度，该高度大于嵌入内容的高度，它就可以工作。唯一的问题是，由于内容不同，具体高度与其他嵌入的 html 文件不匹配，并且会留下大量死空间。我怎样才能使内容包装器缩放到嵌入内容的高度？
<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%;
}
我尝试将嵌入内容和内容包装器的高度设置为 100% 或自动，但都不起作用。
P粉7412238802024-04-01 09:30:55
我通过使用 javascript 将 iframe 的高度设置为其内容的高度来解决我的问题，使用此网站： https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height-according-to-its-内容-使用-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>