XHTMLforum - faux columns und height:100% sind keine Lösungen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - faux columns und height:100% sind keine Lösungen (http://xhtmlforum.de/showthread.php?t=35330)

faux columns und height:100% sind keine Lösungen

Moinsen an alle!

Ich wollte hier mal über die bereits oft gesprochene Problematik der Höhe von DIV's sprechen.
Ich glaube, dass weder height:100%; noch die faux columns eine Lösung darstellen.

Folgende Problematik:
Man erstelle ein Zweispaltiges Layout mit DIV's. Die eine wird links gefloated, hat 15% und heißt "menu". Die andere wird rechts gefloated, hat 85% und heißt "content". Beide DIV's bekommen eine Unterschiedliche Hintergrundfarbe. Im Body bleibt der Hintergrund weiß. Menu bekommt Header-DIV's für Üverschriften. Alle Header-DIV's bekommen eine eigene Hintergrundgrafik und sind in der breite auf "auto" eingestellt. Naja und Links kommen auch mit rein. Content wird dann auch noch mit Inhalt gefüllt. Das ganze sieht so wie in Abb. 1 aus. Die DIV's werden nur bis zum Ende des Inhaltes gestreckt.

Wenn man jetzt BODY und HTML die Höheneigenschaft von 100% gibt

Code:

body, html { padding:0; margin:0; height:100% }

und auch den beiden DIV's diese Eigenschaft zuweist, dann werden die DIV's bis zum Ende des Bildschirms gestreckt. Geht der Inhalt eines DIV's aber über den Bildschirmrand hinaus, sodass man scrollen muss, werden die DIV's nicht weiter gestreckt. Der Inhalt bleibt nicht in den DIV's, sondern geht darüber hinaus - siehe Abb.2.

Jetzt kommen die faux columns. Ich mache jetzt also ein Hintergrundbild, dass die beiden Spalten darstellt. Sagen wir 1px hoch.
Dieses Bild lasse ich jetzt per repeat-y als Hintergrundbild laufen. Das sieht ja gut aus, aber wenn ich auch hier so viel Inhalt habe, dass ich scrollen muss passiert etwas unschoenes. Die DIV's bzw. Ihre Vorgetaeuschte Hintergundfarbe wird zwar weiter gestreckt, aber die Header-DIV's passen nicht mehr mit dem Hintergrund überein. So wie in Abb.3. Ich kann zwar den Hintergrund auf diese Breite einstellen, dann muss aber gewaehrleistet sein, dass ich immer so viel Inhalt habe, dass ich scrollen muss.

Außerdem muss man beachten, dass die Bilder ja statisch sind. Was ist also wenn jemand eine andere Auflösung als der Autor hat. Oder die Seite einfach in einem verkleinertem Browserfenster geöffnet wird.

Für dieses Problem muss es doch eine ordentliche Lösung geben!

Wenn Du willst, dass sich ein gekacheltes Hintergrundbild auch noch weiter kachelt, darfst Du für BODY entweder kein height: 100% angeben oder Du musst (korrekterweise) min-height: 100%; setzen (was der IE und Safari aber nicht kennen).

Wenn du das Hintergrundbild meinst, dass ich bei faux columns benutzt habe, dann hast du mich wohl falsch verstanden, denn das streckt sich ja super. Nur die das Bild von den Headern in der Menuleiste passt nicht mehr zum Hintergrundbild, wenn ich so viel Inhalt habe, dass ich scrollen muss. Siehe Abb. 3.

Das mit min-height habe ich auch schon gelesen, aber da halt immer noch viele den ie benutzen schreckt es ab das zu benutzen.

Zitat:

Das mit min-height habe ich auch schon gelesen, aber da halt immer noch viele den ie benutzen schreckt es ab das zu benutzen.

Da hast Du umsonst Angst. Der IE kennt zwar min-height nicht, interpretiert aber (fälschlicherweise) height genau so wie min-height.

Also: gib für alle braven Browser min-height und für den IE (via Sternchenhack oder Conditonal Comments) height an.

Meinst du das so? (Beispiel am AUszug meines Codes)

Code:

body, html { padding:0; margin:0; font-family:Arial, Verdana, sans-serif; min-height:100%; }

* html body, html { padding:0; margin:0; font-family:Arial, Verdana, sans-serif; height:100%; }



#menu { border:0px; width:15%; float:left; text-align:center; background-color:#dee3e7; min-height:100%; }

* html #menu { border:0px; width:15%; float:left; text-align:center; background-color:#dee3e7; height:100%; }



#content { border:0px; width:85%; float:right; background-color:#efefef; min-height:100%; }

* html #content { border:0px; width:85%; float:right; background-color:#efefef; height:100%; }

Äh, ich schätze mal ja (ohne es getestet zu haben) ...

Also im FF funktioniert es nicht.
Im IE funktioniert es ebenfalls nicht.

Vielleicht solltest Du es mal online zur Verfügung stellen, das macht es leichter ...

LINK GELOESCHT

FF und IE stellen es beide nicht ordentlich da.

Kannst Du auch einen Screenshot machen, wie es aussehen soll?

Beachte auch, dass der IE bei % Angaben Rundungsfehler macht und das DIV für den Inhalt so gerne mal unter das Menü rutscht.