简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

Einbettung/Iframe immer in voller Höhe

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粉021553460P粉021553460182 Tage vor416

Antworte allen(1)Ich werde antworten

  • P粉741223880

    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>

    Antwort
    0
  • StornierenAntwort