Responsive iFrames mit 100% Höhe des iFrame-Contents

Das Problem: Beim Einbinden eines iFrames hat die Anweisung height: 100% keinen Effekt auf die Höhe des iFrames (im Gegensatz dazu funktioniert width: 100% wie erwartet).

Der Grund: Beim Aufbau des HTML-Dokuments, in dem das iFrame angezeigt werden soll, weiß der Browser noch nichts über den Inhalt des iFrames und damit auch nichts über dessen Höhenbedarf. Daher wird schlicht eine gewisse Standardhöhe eingeplant, um danach mit dem Rendern der restlichen Dokument-Teile fortfahren zu können.

Zwar lässt sich diese gewisse Standardhöhe von in der Regel 150px überschreiben durch eine konkrete Höhenangabe, z. B. height: 300px, dazu müssten wir aber den genauen Höhenbedarf des iFrames kennen. OK, lässt sich herausfinden - allerdings: Häufig ist die Höhe eines Fensters ja abhängig von seiner Breite. Spätestens beim responsiven Design wird's also knifflig.

Lifehack mit CSS

Eine recht coole weil sehr simple Lösung ausschließlich mit CSS scheint Folgendes zu sein:

/* CSS */
html, body, iframe {
  height: 100%;
  width: 100%;
} 

Wenn wir sowohl HTML insgesamt als auch dem Body und dem iFrame eine Höhe von 100% zuweisen, hat dies plötzlich doch Auswirkung auch auf das iFrame. Und häufig dürfte das iFrame nun in voller Höhe ohne Scrollbar angezeigt werden. Dumm ist aber, dass das übergeordnete Fenster auf jeden Fall eine Scroll-Leiste erhält. Vermeiden lässt sich das unter Umständen durch eine kleine Reduktion der zugewiesenen Höhe, zum Beispiel auf height: 95%. Unschön ist bei beiden Varianten allerdings, dass unterhalb des iFrames ein Freiraum entsteht bzw. dem Frame mehr Platz zugestanden wird, als es benötigt.

Der Grund erneut: Weiterhin reserviert der Browser beim Aufbau der Seite einen gewissen Platz für das iFrame - aufgrund der Prozentangaben nun deutlich mehr als die standardmäßigen 150 Pixel. Weiterhin aber wird der tatsächliche Höhenbedarf des iFrames ignoriert. Es ist daher reine Glückssache, ob's hinterher passt oder nicht.

Zweiter Lösungsversuch mit CSS

Die relativ neue CSS-Eigenschaft aspect-ratio lässt sich nicht nur auf <img>, <embed>, <video> …, sondern auch auf <iframe> anwenden. Das automatische Berechnen des Seitenverhältnisses mit aspect-ratio: auto funktioniert allerdings bei iFrames nicht, weil sie keinen "intrinsic aspect ratio" aufweisen, also kein immanentes Seitenverhältnis besitzen (im Gegensatz z. B. zu Bildern) bzw. die Browser ihnen ein festes Verhältnis von 3:1 (300 Pixel Breite zu 100 Pixel Höhe) aufzwingen.

Also muss eine konkretere Angabe her. Im folgenden Beispiel ist das eingebundene iFrame auf aspect-ratio: 2 / 1 eingestellt und width: 100%:

Das mag nun auf großen Bildschirmen passend aussehen, spätestens auf Handy-Displays wird aber wieder ein Scroll-Balken erscheinen. Es bleibt also Glückssache.

Lösung mit JavaScript

Nur mittels JavaScript lässt sich der Höhenbedarf des iFrames in Abhängigkeit von der zur Verfügung stehenden Breite genau ermitteln. Die Eigenschaft scrollHeight liefert diesen Wert (kleine Einschränkung: border und margin sind nicht einbezogen, siehe Dokumentation). Mit folgendem Einzeiler wird beim Laden eines iFrames dessen Höhenbedarf ermittelt und seiner style.height zugeordnet:

<iframe style="width: 100%; border: 0; margin: 0;" onload="this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';">

Außerdem wird per body { overflow: hidden; } als CSS-Angabe innerhalb des iFrames die nun unnötige Scrollbar ausgeblendet. Hier das Ergebnis:

Einen kleinen Haken gibt's aber noch. Der Höhenbedarf wird nur einmal beim Laden des iFrames ermittelt und an CSS-Height übermittelt. Sollte danach das Browser-Fenster verkleinert oder vergrößert werden, passt diese Höhe nicht mehr. Auf dieses "Resize" lässt sich per JavaScript natürlich auch reagieren:

<script>
addEventListener('resize', (event) => {document.getElementById('myFrame').contentDocument.location.reload(true); });
</script>
<iframe id="myFrame" style="width: 100%; border: 0; margin: 0;" onload="this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';" src="url/iframe.html">
</iframe>

Und hier das Endergebnis: