iFrames in der Höhe anpassen
iFrames kommen aus der Internet-Steinzeit. In den 90ern waren sie überall, heute sind sie fast ausgestorben. Manchmal braucht man sie aber doch noch.
Es gibt verschiedene JavaScript-Lösungen mit denen sich iFrames der Höhe des Inhalts anpassen lassen.
Will man den iFrame aber der Seitenhöhe anpassen geht das so:
<iframe src="/beispiel.html" style="height: 100vh;" width="100%"></iframe>
Die Lösung hier ist von Josh Crozier aus einer -> Diskussion bei stackoverflow, als dort die selbe Frage gestellt wurde.
Mit width="100%" passt sich der Inhalt in der Breite an. Leider funktioniert height="100%" nicht genauso und führt meist nicht zu dem gewünschten Ergebnis.
Mit CSS3 gibt es nun -> Viewport Units die wir hier verwenden können.
Die CSS-Anweisung kommt wie im Beispiel in die iFrame-Deklaration, am besten unmittelbar nach src=" "
Das Ergebnis sieht übrigens nicht in allen Browsern genau gleich aus. Dann hilft nur ausprobieren, welcher genaue vh-Wert für die Viewport Höhe am besten passt.
