iframe seitenfüllend

[moerchenland]

Hallo,

ich möchte auf einer Webseite einen Header (Bild & Menu) mit einer festen Höhe benutzen und einen iframe, in den ich wechselnde Inhalte lade. Leider wird dem iframe eine feste Höhe verpasst, egal ob ich height:100% oder height:* angebe. Auch den iframe in eine Tabelle zu packen klappt nicht, er bekommt von irgendwo her eine Höhe. Je nach Bildschirm-/ Fenstergröße bekomme ich dann doppelte Scrollbalken oder unten einen leeren Bereich. Bei der Breite funktioniert es. Was mache ich falsch oder was muss ich tun, damit es geht?

  <iframe src="home/Home.htm" name="unten" frameborder="0" style="position:relative; margin:0; padding:0; border:0; width:100%; height:100%;">
   ...
  </iframe>

Danke schonmal für alle Antworten

moerchenland

[MrMurphy1]

Hallo

Was mache ich falsch

Du verwendest ohne Anlaß einen iFrame. Lösung: Lass es weg und verwende HTML-Elemente regelgerecht.

Gruss

MrMurphy

[Felix Riesterer]

Liebes moerchenland,

Du willst Dir Arbeit sparen, indem Du "stehende" Inhalte Deiner Seite (wie Header und Menü) "nur einmal" erstellst, um die eigentlichen Inhalte in einem IFrame anzuzeigen.

Dieses Konzept ist für das WWW seit geraumer Zeit keine gute Idee (mehr, wenn es jemals eine war). Auf der Nachteile-Seite stehen vor allem Besucher, die über einen Suchmaschinen-Treffer direkt auf einer IFrame-Seite landen, denen dann das Drumherum fehlt und die dann Deine Seite nicht weiter nutzen können. Mehr zu den Besonderheiten bei der Verwendung von Frames findest Du im Wiki.

Wenn Du an die eingebaute Hilfe von Programmen denkst, dann öffnet sich diese immer in einem neuen Fenster, welches für den User immer das "Drumherum" bietet. Das bedeutet, dass Du bei offline-Sachen Dein Konzept mit Frames (steht allgemein für Frame-basierte Lösungen, auch IFrames) sinnvoll einsetzen kannst. Das ist aber eben offline und nicht im WWW.

Wenn Du keine serverseitige Programmlogik erstellen möchtest, die Dir das Drumherum für jede Inhaltsseite zusammenbaut (dazu gehören z.B. die serverseitigen Scriptsprachen), dann kannst Du auf fertige Lösungen setzen, die man CMS nennt und die in dieser Art funktionieren.

Liebe Grüße,

Felix Riesterer.

[moerchenland]

Hallo Felix,

Deine Antwort ist die einzige, die mir weiterhilft. (Wenn auch nicht so wie gewünscht). Kannst Du ein cms empfehlen, dass für einen Neuling einfach zu erlernen ist? Meistens können die Programme viel mehr als ich brauche und verwirren dann eher.

Mir schien ein cms für ein paar hauptsächlich textbasierte Seiten zu aufwändig, aber es scheint ja keine Lösung für einen iframe mit variabler Höhe zu geben. Suchmaschinen-Treffer sind kein Thema, da ich nur meine eigenen Seiten verwenden will und damit auch die tags selbst in der Hand habe.

Viele Grüße

moerchenland

[Gunnar Bittersmann]

@@moerchenland

ich möchte auf einer Webseite einen Header (Bild & Menu) mit einer festen Höhe benutzen

Darüber solltest du nochmal nachdenken. Ich bezweifle, dass du die für Bild und Menü benötigte Höhe bei verschieden Ausgabegeräten kennst.

Auch den iframe in eine Tabelle zu packen klappt nicht

Tabelle? Was hätte einer Tabelle damit zu tun?

„Tabellen heißen so, weil sie in Zeilen und Spalten aufteilbare Daten darstellen sollen, die zueinander in irgendeiner Relation stehen. Wären sie zum Gestalten erfunden worden, hieße sie Gestelle.“ —Jaroslav Jablonski

Was mache ich falsch

Du verwendest Frames. Frames sind out. Waren es schon immer

oder was muss ich tun, damit es geht?

Man könnte auf die Idee kommen, es andersrum zu machen: nicht die veränderlichen Inhalte per (I)frame einbinden, sondern die unveränderlichen, hier also Header und Menü auf die Seiten zu brinden.

Aber das scheitert auch daran, dass (I)frames feste Höhen haben; man die für die Inhalte benötigte Höhe aber nicht kennen kann, s.o.

Du kannst gleichbleibende Inhalte serverseitig ins HTML einbetten, z.b. mit PHP (Tutorial) oder SSI (server-side includes).

Beim Menü sollte der Inhalt aber gar nicht von Seite zu Seite gleichbleiben; man möchte die aktuelle Seite hervorheben (aria-current="page")/nicht verlinken. Aber auch das ist mit PHP bzw. SSI möglich.

LLAP 🖖

[moerchenland]

Hallo Gunnar,

Danke für Deinene Tips.

Man könnte auf die Idee kommen, es andersrum zu machen: nicht die veränderlichen Inhalte per (I)frame einbinden, sondern die unveränderlichen, hier also Header und Menü auf die Seiten zu brinden.

Darüber werde ich mal nachdenken, denn von meinem Header kenne ich die Höhe und eine Variable Breite habe ich bereits beücksichtigt.

Du kannst gleichbleibende Inhalte serverseitig ins HTML einbetten, z.b. mit PHP (Tutorial) oder SSI (server-side includes).

Auch der php-Ansatz ist vielversprechend.

Der Plan ist insgesamt, evtl. eine mobile Version der Seiten zu erstellen für ganz kleine Bildschirme. Man kann eben nicht für alles eine passende Lösung finden.

Viele Grüße

moerchenland

[Matthias Apsel]

Hallo moerchenland,

Der Plan ist insgesamt, evtl. eine mobile Version der Seiten zu erstellen für ganz kleine Bildschirme.

Es ist keine gute Idee, dieselben Inhalte unter verschiedenen Adressen zur Verfügung zu stellen, auch wenn einige Anbieter (auch großer Zeitschriften) das für ihre Webangebote tun.

Man kann eben nicht für alles eine passende Lösung finden.

Mithilfe von mediaqueries kannst du auf die Eigenschaften des Ausgabegerätes reagieren.

---

Das wäre (ungetestet) noch ein weiterer Nachteil von Iframes: Reagieren MQ innerhalb des eingebundenen Dokuments auf die Größe des Iframes?

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Das wäre (ungetestet) noch ein weiterer Nachteil von Iframes: Reagieren MQ innerhalb des eingebundenen Dokuments auf die Größe des Iframes?

Antwort: Ja, tun sie. CodePen

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@moerchenland

denn von meinem Header kenne ich die Höhe

Wirklich? Warum denkst du zu wissen, dass auch bei kleinen Bildschirmen alles in eine bestimmte Höhe gezwängt bekommst, wo der Inhalt da evtl. mehr Zeilen braucht als auf breiteren Bildschirmen? Außerdem kennst du nicht die beim Nutzer verwendete Schriftgröße.

Der Plan ist insgesamt, evtl. eine mobile Version der Seiten zu erstellen für ganz kleine Bildschirme.

„Mobile Version“ heißt andere Seiten und Browserweiche? So ein m-dot-Dingens?? Ganz schlechter Plan.

LLAP 🖖

[at]

Hallo moerchenland,

zunächst einmal gehe ich davon aus, dass du trotz dessen Nachteilen einen wichtigen Grund hast, dennoch einen <iframe> zu verwenden. Außerdem hoffe ich, dass du das style-Attribut nur verwendest, um uns ein möglichst kompaktes Codefragment zu zeigen. Anderenfalls nähmst du dir die Möglichkeit, die Darstellung weitergehend anzupassen.

Leider wird dem iframe eine feste Höhe verpasst, egal ob ich height:100% oder height:* angebe.

Dann verwende eine geeignete Maßeinheit.

Auch den iframe in eine Tabelle zu packen klappt nicht, er bekommt von irgendwo her eine Höhe.

Zum Vergleich von zwei Dokumenten solltest du mindestens zwei <iframe>-Elemente in die Tabelle einbauen. Die Höhen kannst du wie beschrieben anpassen.

Je nach Bildschirm-/ Fenstergröße bekomme ich dann doppelte Scrollbalken oder unten einen leeren Bereich.

Wenn du dem richtigen Element einen passenden Wert für die Eigenschaft overflow gibst, kannst du einen von beiden Scrollbalken abschalten.

MfG, at