简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Einbettung/Iframe immer in voller Höhe
P粉021553460
P粉021553460 2024-03-31 09:50:18
0
1
409

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.

P粉021553460
P粉021553460

Antworte allen(1)
P粉741223880
P粉7412238802024-04-01 09:30:55 1 Etage

我通过使用 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！