Ich habe mehrere HTML-Dateien eingebettet, die unterschiedliche „Höhen“ haben. Ich möchte, dass der eingebettete Inhalt immer das übergeordnete Div ausfüllt, sodass ich durch das übergeordnete Div und nicht durch den eingebetteten Inhalt scrollen kann.
Wenn ich eine bestimmte Höhe für den Inhaltswrapper festlege, die größer ist als die Höhe des eingebetteten Inhalts, funktioniert es. Das einzige Problem besteht darin, dass die spezifische Höhe aufgrund unterschiedlicher Inhalte nicht mit den anderen eingebetteten HTML-Dateien übereinstimmt und viel Leerraum hinterlässt. Wie kann ich den Inhaltswrapper an die Höhe des eingebetteten Inhalts anpassen?
<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%;
}
Ich habe versucht, die Höhe des eingebetteten Inhalts und des Inhalts-Wrappers auf 100 % oder automatisch einzustellen, aber beides hat nicht funktioniert.
我通过使用 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>