title image


Smiley Re: 3 spaltiges design alle sollen die gleiche höhe haben
> wie kann ich dieses problem lösen?



Garnicht (es sei denn, Du nimmst JavaScript zuhilfe, um die Höhe des Container mit

dem meisten Inhalt zu ermitteln).

Aber Du kannst so halbwegs[1] den Eindruck erwecken, dass alle 3 Container gleich

hoch sind.



[1] Funktioniert allerdings nur, wenn ab einer Screenhöhe von 100% der mittlere

Container grundsätzlich den meisten Inhalt hat.



Hierzu benötigst Du ein weiteres DIV, wo alle 3 Spalten eingeschlossen werden. Die

Hintergrundfarbe der Spalten (links außen und rechts außen) werden mit der

Hintergrundfarbe in diesem Container erzeugt. Dieser alle einfassende Container

bekommt auch den weißen Border drumrum.



In diesem Container werden Deine 3 Spalten eingebaut. Die äußeren Spalten bekommen

keine Hintergrundfarbe, sodass hier weiterhin die Hintergrundfarbe des übergeordneten

Container sichtbar bleibt.



Die mittlere Spalte bekommt die Hintergrundfarbe, die Du bereits formatiert hast.

Die Höhe dises Container beträgt: min-height: 100%; sodass mindestens die Höhe des

Screens gefüllt wird. Zusätzlich erhält dieser Container Rahmen links und rechts

außen.



Bei mehr Inhalt als auf dem Screen sichtbar ist, wird der mittlere Container

gedehnt, das zur Folge hat, dass auch der übergeordnete Container gedehnt wird.

Dadurch wird auch die Hintergrundfarbe des übergeordneten Container weiterhin

dargestellt. Da die äußeren Spalten jeweils keine eigene Hintergrundfarbe haben,

wird in diesen die Hintergrundfarbe des übergeiordneten Container dargestellt



Der Eindruck entsteht, dass alle 3 Spalten gleich hoch sind.



Funktioniert allerdings nicht, wenn die äußeren Spalten mehr Inhalt (oberhalb 100%

der Screenhöhe) bekommen als die mittlere Spalte.



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: