nicht angemeldet
iframe-Anordnung
Matthias Scharwies
Gunnar Bittersmann
Auge
Tabellenkalk
Rolf BKann mir jemand helfen? Warum werden die beiden rechten iframes nicht bis zum rechten Fensterrand angezeigt? Danke!
<!DOCTYPE html>
<html>
<head>
<title>Iframe-Seite</title>
<style>
iframe {
width: 100%;
height: 100%;
border: none;
}
#container {
display: flex;
height: 100vh;
width: 100vw;
}
#iframe1 {
width: 50%;
}
#iframe2, #iframe3 {
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div id="container">
<iframe id="iframe1" src="testdok1.html"></iframe>
<div>
<iframe id="iframe2" src="testdok2.html"></iframe>
<iframe id="iframe3" src="testdok3.html"></iframe>
</div>
</div>
</body>
</html>
-
Servus!
Kann mir jemand helfen? Warum werden die beiden rechten iframes nicht bis zum rechten Fensterrand angezeigt?
Auf den ersten Blick sieht das so aus, als ob du die obsolete Frames-Technik mit iframes nachbauen willst.
Falls das der Fall ist, empfehle ich Dir einen Neuaufbau mit Grid Layout:
- CSS/Tutorials/Grid/Einführung
Das ist die moderne Art, Elemente nebeneinander zu platzieren.
Herzliche Grüße
Matthias Scharwies
--
Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
Ihr Name ist Sandra.-
Ich schaue mal. Danke. Warum ist denn das Grid Layout besser?
-
Servus!
Ich schaue mal. Danke. Warum ist denn das Grid Layout besser?
Ich finde es viel intuitiver. Dieses (auf die schnelle geschriebene) CSS sollte deine Frage evtl. beantworten:
body { max-width: 60em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; } #iframe1 { grid-row: span 2; } * {border: thin solid;} /* alles andere CSS weglassen! */Dafür musst du die div-Container entfernen und nur die drei iframes als Kinder des body haben.
Herzliche Grüße
Matthias Scharwies
--
Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
Ihr Name ist Sandra.-
Servus!
Dafür musst du die div-Container entfernen und nur die drei iframes als Kinder des body haben.
hier ist ein Live-Beispiel.
Herzliche Grüße
Matthias Scharwies
--
Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
Ihr Name ist Sandra. -
Ich habe es mit Grid ausprobiert. Funktioniert. Hauptsache. Fuchst einen aber schon, dass ich nicht weiß, warum die ursprüngliche Lösung nicht geklappt hat.
Grüße auch noch an Sandra und den Bräutigam. Ich drücke den beiden die Daumen, wäre wohl auch selbst eingesprungen, aber meine Frau meinte, das mit der Scheidung käme jetzt zu kurzfristig und klappt nicht bis zum Termin.
-
-
- CSS/Tutorials/Grid/Einführung
-
@@Franck Dettfurth
Warum werden die beiden rechten iframes nicht bis zum rechten Fensterrand angezeigt?
Verstehe ich deine Frage richtig? Du willst wissen, warum sie nicht nur bis zum rechten Fensterrand gehen, sondern darüber hinaus?
Das liegt an
body { margin: 8px }aus dem Browser-Stylesheet.🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
Hallo
@@Franck Dettfurth
Warum werden die beiden rechten iframes nicht bis zum rechten Fensterrand angezeigt?
Verstehe ich deine Frage richtig? Du willst wissen, warum sie nicht nur bis zum rechten Fensterrand gehen, sondern darüber hinaus?
Ich lese da eher eine nicht bis zum rechten Rand reichende, also zu schmale Konstruktion heraus. Mal abgesehen von dem Div im Iframe, das weitere zwei Iframes enthält, was zu einer nicht funktionieren könnenden Struktur führt[1], gibt es bei der Verwendung von Prozentwerten ja immer noch die Voraussetzung, dass einem Vorfahrenelement eine feste Breite zugeordnet werden muss, auf die sich die Prozentwerte beziehen können.
Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
Das hat sich ja durch den Ersatz der Konstruktion durch ein Grid erledigt. ↩︎
-
Hallo,
Mal abgesehen von dem Div im Iframe, das weitere zwei Iframes enthält,
Seh ich was, was du nicht siehst? oder umgekehrt? Oder auch: Häh?
Gruß
Kalk-
Hallo
Hallo,
Mal abgesehen von dem Div im Iframe, das weitere zwei Iframes enthält,
Seh ich was, was du nicht siehst? oder umgekehrt? Oder auch: Häh?
Tja, nach nochmaligem draufschauen bin ich es, der etwas gesehen hat, was nicht da ist.
Ich sah …
<iframe> <div> <iframe></iframe> <iframe></iframe> </div> </iframe>… da ist
<iframe></iframe> <div> <iframe></iframe> <iframe></iframe> </div>Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
-
-
@@Auge
Verstehe ich deine Frage richtig? Du willst wissen, warum sie nicht nur bis zum rechten Fensterrand gehen, sondern darüber hinaus?
Ich lese da eher eine nicht bis zum rechten Rand reichende, also zu schmale Konstruktion heraus.
Ich bezog mich nicht darauf, was Franck schrieb, sondern darauf, wie es tatsächlich im Browser aussieht.
gibt es bei der Verwendung von Prozentwerten ja immer noch die Voraussetzung, dass einem Vorfahrenelement eine feste Breite zugeordnet werden muss, auf die sich die Prozentwerte beziehen können.
Nö. Bei Blockelementen (wie
htmlundbodyals Vorfahrenelemente welche sind), verhält sich der Defaultwertautobeiwidthso wie100%. Es gibt also garantiert schon ein Vorfahrenelement, auf das sich die Prozentwerte beziehen können.Hast du das vielleicht mit
heightverwechselt?🖖 Живіть довго і процвітайте
--
Ad astra per aspera
-
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
--
sumpsi - posui - obstruxi
-