✔ div height=100% nur im IE?

Hallo!

Wie der Titel schon sagt, versuche ich eine DIV-Box über die gesamte Fensterhöhe anzeigen zu lassen.
Da es ja aber verschiedene Monitorauflösungen gibt, kann es doch eigentlich nur mit height="100%" funktionieren?!
Der IE interpretiert die 100% auch als solche, Netscape/Mozilla und Opera aber nicht.
Wie schaffe ich es nun dass die DIV-Box auch in den anderen Browsern über die gesamte Höhe dargestellt wird? (so wie im Anhang dargestellt)

Noch ein paar Details:
Das Menü (blauer Streifen) hat eine feste Breite und variable Höhe.
Content (weisse Fläche) hat eine variable Breite und variable Höhe.

Gruss Dr Dau

CSS-Code:
HTML-Code:
Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

Hallo!

Auf den ersten Blick sah es ja schon ganz gut aus.
Wenn jetzt aber im Content der Inhalt höher als das Browserfenter ist, dann muss ich ja scrollen.
Soweit ok. Nur setzt sich der blaue Streifen nicht weiter fort, dass heisst er endet irgendwo mitten drin.
Und wenn der Inhalt von Content breiter als das Browserfenster ist, schiebt sich der Inhalt unter den blauen Streifen.

So soll es aber nicht sein.
Der blaue Streifen soll das Menü sein.
Darum soll der Streifen auch von oben bis unten gehen, unabhängig davon wieviele "Buttons" ich habe, bzw. wie hoch oder breit der Inhalt von Content ist.

Gruss Dr Dau

Hallo!

Auch wenn ich wieder auf Tabellenlayout umgestiegen bin weil DIV-Boxen ja immer wieder Probleme machen, liess mir die ganze Sache dann doch keine Ruhe.

Im Anhang sind 2 Beispiele:
Beispiel 1 besteht aus 2 Spalten.
Beispiel 2 besteht aus 2 Spalten und einer Kopfzeile.

Beide Beispiele sind auf 1000px Gesamtbreite ausgelegt, lässt sich jedoch ändern.
(Menü 140px + Content 860px = gesamt 1000px)
(Kopfzeile 1000px)
Die Höhe beider Spalten passt sich dem Inhalt der linken und/oder rechten Spalte gemeinsam an und ist mindestens so hoch wie die Browserauflösung.
Die Kopfzeile in Beispiel 2 hat eine feste höhe.

Für die linke und rechte Spalte braucht ihr die gleiche Hintergrundgrafik, diese muss die breite vom Menü haben (im Anhang ist sie 140px breit).
Die grösse der Hintergrundgrafik für die Kopfzeile spielt keine Rolle.
Beide Grafiken können auch gemustert sein.

In [if IE] stehen Korrekturangaben für den IE ab 5.0 (also für 5.0, 5.5 und 6.0, ohne Mac-Version).
Für ältere Versionen sind die [if IE] Anweisungen nicht verfügbar da diese erst mit Version 5.0 eingeführt wurden.

Hierbei handelt es sich um spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.

Zum Vergrößern anklicken....

Getestet habe ich die Seite unter Win98 SE mit IE 5.0 und unter Win2000 SP4 mit IE 5.5, IE 6.0, Opera 7.54, Netzcape 7.1 und Mozilla 1.7.5.

Validierung:
HTML = This Page Is Valid HTML 4.01 Strict!
CSS = Keine Fehler oder Warnungen gefunden

Was mich (und andere sicherlich auch) jetzt noch interessiert:
1. wie verhält sich die Seite mit anderen Browsern und/oder Systemen?
2. ist es evtl. auch möglich die Seite XHTML 1.0 valide zu bekommen?

Da ich mich noch nie mit XHTML befasst habe, hatte ich auch keine Lust nur deswegen erst lange jeden sch**** nachzulesen.
Ihr kennt dass ja, man probiert irgendwas rum ohne zu wissen ob es überhaupt machbar ist.
Ich will kein angepassten Code, sondern ich will nur wissen ob es machbar ist.
Aber bitte kein "müsste gehn", sondern überzeugt euch bitte auch davon (durch den Validator schicken).

Über Feedback würde ich mich freuen.... oder auch nicht, kommt halt auf den Inhalt an.

Gruss Dr Dau

[edit] Die Hintergrundgrafiken können natürlich auch transparent sein, aber auch dann müssen sie die Grösse wie zuvor beschrieben haben. [/edit]

Hallo,

Noch 'ne Kleinigkeit: bei Elementen mit dem Attribut »position:absolute« sollte auch die Positionierung angegeben werden. Wenn ich mir die »beispiel_2.html« mit dem IE6 ansehe, verschwinden die ersten Zeilen von #nav und #content hinter #top. Also einfach dem CSS folgenden Code hinzufügen:
Außerdem konnte ich soeben mit Dr. Daus Hilfe meine eigene Forums-Anfrage zu dem verwandten Thema »Variable Höhe für Navi-DIV zwischen Kopf- und Fußzeile« quasi zum Tutorial vervollständigen. Die Unterschiede: (1) valides XHTML strict, (2) es gibt zusätzlich eine Fußzeile und (3) nur für das Navi-DIV ist eine Breite festgelegt. Vielleicht hilft auch das noch einigen weiter.

Schöne Grüße
27apricot

Hallo!

Da die DIV's alle links oben in der Ecke beginnen, ist die Position Top und Left gleich 0px.
Ob man nun top:0px (per default vorgegeben und daher nicht extra angegeben) und padding-top:55px nimmt oder top:50px und padding-top:5px, bleibt sich letztenendes gleich, kommt bei beidem insgesamt 55px bei raus.
Div#top hat eine Höhe von 50px, div#nav und div#content haben ein padding-top von 55px.
Somit kann rein rechnerrisch der Text vom div#nav und div#content garnicht durch div#top verdeckt werden, sondern fängt 5px tiefer an.
Selbst wenn der IE 6.0 für WinXP (ich gehe mal davon aus dass Du WinXP hast) die "height" Angabe von div#top richtig interpretieren würde, würde die erste Zeile im div#nav und div#content grade mal angekratzt werden.
Hast Du was an der beispiel_2.html geändert?
Oder hast Du evtl. im IE unter "Ansicht/Schriftgrad" "Grösser" anstatt "Mittel" stehen?
Dann ist es natürlich klar dass die erste Zeile verdeckt wird, die Schrift ist ja in keinerlei Art formatiert und ändert somit ihre Grösse/Zeilenabstand.
Die Schriftformatierung habe ich bewusst weg gelassen um den Quelltext nicht unnötig unübersichtlich zu machen.
Ich denke mal dass jeder die Schriftformatierung selber hinbekommt.

(1) XHTML habe ich aus schon genannten Gründen sein gelassen.
(2) Ist/war mit ein paar Änderungen sicherlich umsetzbar, für mich war ja nichtmal die Kopfzeile geplant.
(3) div#nav hatte auch schon vorher eine festgelegte Breite ( width: 140px; ).

Alles in allem denke ich dass mit deinem oder meinem Beispiel dem Einem oder Anderem sicherlich geholfen werden kann, zumindest ansatzweise.

Gruss Dr Dau

Hallo Dr. Dau,

du hast natürlich Recht. Ich hab's mir nochmal genau angesehen mit der verdeckten Schrift. Das Problem entsteht nur bei der »Browse«-Ansicht in HomeSite 5. Dort ist der IE6 als Browser integriert, hat aber durch den eingebauten Win-Explorer-Balken wenig Platz. Dadurch war schlicht und einfach der Text im Kopf zu lang und der Balken wurde höher als 55px.

Also nochmal vielen Dank für die »Zusammenarbeit«

Schöne Grüße
27apricot.

Hallo!

So kann es kommen.
Da ich alles direkt im Quelltext schreibe und dann mit den jeweiligen Browser teste, kenne ich die ganzen Probleme die durch WYSIWYG Editoren entstehen können nicht.... von den Dingern bin ich ganz schnell wieder weggekommen.
Macht zwar mehr Arbeit aber letztlich lernt man so auch am besten.

Gruss Dr Dau

Auch wenn's hier vielleicht nicht hingehört: aber HomeSite ist kein WYSIWIG-Editor, sondern zum Quelltext schreiben da. Hat aber eben eine integrierte Browse-Anzeige, zu der man aus dem Editier-Modus einfach per F12 wechseln kann. Ich jedenfalls hab' noch kein besseres Programm gefunden.
Ich halte auch ganz und gar nichts von WYSIWIG.

Schöne Grüße.
27apricot.

Also ich benutze UltraEdit, ein Text/Hex Editor mit Syntaxhervorhebung für verschiedene Scriptsprachen.
Eine Funktion "Datei im Browser anzeigen" hat er auch, diese ruft die Seite direkt im "Standard" Browser auf und nicht in einer integrierten Anzeige.
Was ich besonders praktisch finde ist, ich kann z.b. 20 Seiten offen haben und in allen (um mal wieder auf das Thema XHTML zu kommen) z.b. <br> durch <br /> gleichzeitig ersetzen lassen.
Wobei "gleichzeitig" eigentlich der falsche Ausdruck ist, genauer gesagt durchläuft er alle geöffneten Seiten im Batchmodus.