iframe-Anordnung

[Rolf B]

Hallo Gunnar,

Das liegt an body { margin: 8px } aus dem Browser-Stylesheet.

Das trägt dazu bei, aber das ist es nicht alleine. Der Margin trägt dazu bei, aber indirekt auch die nicht verstandenen Eigenschaften von Flexbox und iframe.

Denn: Das rechte div enthält zwei iframes. iframes sind inline-Elemente, befinden sich also auf der Baseline einer Zeile. Dadurch entsteht unterhalb des iframe etwas Platz. Durch die Höhenangabe 50% führt das dazu, dass die beiden iframes zusammen höher sind als der Container, sie dehnen den Body nach unten und es entsteht ein vertikaler Scrollbar. Der reduziert die verfügbare horizontale Breite, und es erscheint zusätzlich ein horizontaler Scrollbar, auch bei margin:0 auf dem body. Und 100vw sind zu breit, weil 100vw den Platz inclusive Scrollbar darstellen. 100% sind der Platz im Client-Bereich des Body.

Lösung 1: den iframes ein vertical-align: bottom geben, so dass sie auf dem Boden der Zeile sitzen. Die Scrollbars entstehen jetzt nicht mehr. Das Ergebnis möchte ich ein "Glücks-Layout" nennen. Glück gehabt, es funktioniert.

Lösung 2: den iframes ein display:block geben. Dadurch hat die rechte Spalte aber keine definitive Breite mehr, die 100% Angabe für iframe 2+3 wird ignoriert und die 300px -Defaultbreite für ersetzte Elemente greifen wieder. Man kann eine CSS Regel
#container > * { flex-basis:50%; }
ergänzen, um das zu heilen.

Lösung 3: Grid Layout für die ganze Seite. Ohnehin die beste Wahl, wenn mehr passieren soll, als X Elemente nebeneinander zu stellen.

Rolf