100% Höhe

[MKay]

Hi,

ich sitze zur Zeit an diesem Layout und habe ein Problem:
http://charlottenburgerfc.de/

Das Design sieht im FF, IE und Opera jeweils anders aus.
Der FF stellt wie üblich alles so dar, wie es sein soll.
Der IE jedoch, genau wie der Opera, lassen den Menü-Hintergrund und den rechten Rahmen nicht ganz bis zum unteren Browserrand gehen, obwohl eine 100%ige Höhe im CSS gesetzt ist.

Nun meine Frage an euch: Wo liegt mein Fehler? Und wenn ich keinen gemacht habe, dann: Wie bringe ich die anderen Browser dazu es richtig anzuzeigen? :)

Gruss
MKay

[Manko10]

height:100%; bezieht sich immer auf das Elternelement. Alle Elternelemente müssen also auch eine Höhe von 100% haben.

[MKay]

Jo, ich weiss. Hab gerade meinen Fehler gefunden. Hab einmal eine Angabe vergessen ;)

Nun zu meinem 2. Problem (Ich hab die o.g. Seite mal updated):
Wenn der Inhalts-Bereich länger wird durch zB Zeilenumbrüche, dann wird im FF der rechte Border und der Menu-BG nicht verlängert, was eigentlich auch logisch ist. Im IE und Opera wirds beides angezeigt. Wie bekomme ich das nun im FF auch hin?

Gruss
MKay

[ChrisB]

Hi,

Wenn der Inhalts-Bereich länger wird durch zB Zeilenumbrüche, dann wird im FF der rechte Border und der Menu-BG nicht verlängert, was eigentlich auch logisch ist.

Ja, logisch. Weil ...?
Eben, 100% Hoehe sind nun mal 100% Hoehe.

Im IE und Opera wirds beides angezeigt.

Ja, weil die Seite durch die unvollstaendige Doctype-Angabe im Quirks Mode gerendert wird, erlaubt sich Opera wohl mal wieder, es genauso falsch zu machen wie der IE.

Wie bekomme ich das nun im FF auch hin?

Wenn du keine Hoehe, sondern lediglich eine Mindesthoehe vergeben willst - dann nutze auch die entsprechende CSS-Eigenschaft.

MfG ChrisB

[MKay]

Mindest-Höhe habe ich bereits ausprobiert. Funzt genausowenig.

[MKay]

So,

ich habe nun den größten Teil hinbekommen:
http://charlottenburgerfc.de/neu/

Die Höhe ist nun immer 100% vom Sichtbaren des Browsers und wenn der Inhalt länger ist, passen sich die "Rahmen" links und rechts an.

Das einzige Problem ist nun noch, dass der Div mit der ID #right (der Inhalts-Div) nicht bis zum unteren Browserrand geht, obwohl dessen Höhe auf 100% gesetzt ist. Das Elternelement müsste an sich doch die richtige Größe haben (man siehts ja).

Wo liegt nun mein Fehler?

PS: Der IE zeigt mir zudem plötzlich nicht mehr meine Linien über den Tabs an.  Schreibe ich in den Linien-Div etwas hinein, dann erscheint die Linie, aber nur so lang wie der Text ist. Woran kann das liegen?

Gruss
MKay

[ChrisB]

Hi,

Das einzige Problem ist nun noch, dass der Div mit der ID #right (der Inhalts-Div) nicht bis zum unteren Browserrand geht, obwohl dessen Höhe auf 100% gesetzt ist. Das Elternelement müsste an sich doch die richtige Größe haben (man siehts ja).

height in Prozent auf min-height bezogen funktioniert meiner Erfahrung nach nicht wie gewuenscht.

PS: Der IE zeigt mir zudem plötzlich nicht mehr meine Linien über den Tabs an.  Schreibe ich in den Linien-Div etwas hinein, dann erscheint die Linie, aber nur so lang wie der Text ist. Woran kann das liegen?

Die Notation
<div class="line"/>
fuer ein inhaltsleeres Div-Element mag zwar in XHTML korrekt sein - in Punkto Browserkompabilitaet ist sie aber nicht zu empfehlen.

Aber warum willst du fuer eine einfarbige Linie ueberhaupt ein inhaltsleeres Element nutzen - warum gibst du nicht einfach einem anderen, sowieso schon vorhandenen Element einen Border?

MfG ChrisB

[MKay]

height in Prozent auf min-height bezogen funktioniert meiner Erfahrung nach nicht wie gewuenscht.

Wie kann ich dann deiner Meinung nach das Problem lösen?

[MKay]

Edit: Hab jetzt alles selbst hinbekommen.

Gruss
MKay

[Kai345]

Grütze .. äh ... Grüße!

Der IE jedoch, genau wie der Opera, lassen den Menü-Hintergrund und den rechten Rahmen nicht ganz bis zum unteren Browserrand gehen, obwohl eine 100%ige Höhe im CSS gesetzt ist.

Mag sein, aber 100% von was genau? Stichwort Elternelemente.

Außerdem versetzt der gewählte doctype die browser in den quirksmode

Cü
Kai

[Inita]

Hoi,

schau mal das beispiel an 100% hoehe:

http://inix.in.funpic.de/stfooter.html

und

http://inix.in.funpic.de/stickself.html

LG,
Inita