Höhe von DIV dynamisch berechnen

[Florian]

Servus!

Ich bin sehr kurz davor, zu verzweifeln:

Mein Layout besteht aus 4 DIV-Elementen, der Aufbau schaut ungefähr so aus (bzw. das hätte ich gerne):
+---------+
| Header  |
+----+----+
|Navi|Main|
+----+----+
| Footer  |
+---------+

Ich habe nur keinen Schimmer, wie ich die Höhe des Navi-DIVs (mit bgcolor) an die des Main-DIVs anpasse (die Höhe des Main-DIVs variiert je nach Inhalt)... Zumal beides min. bis zum Boden des Browserinnenfensters reichen soll, wo dann der Footer erscheinen soll.

Kann mit da jemand helfen?

[Gunnar Bittersmann]

@@Florian:

Ich habe nur keinen Schimmer, wie ich die Höhe des Navi-DIVs (mit bgcolor) an die des Main-DIVs anpasse (die Höhe des Main-DIVs variiert je nach Inhalt)...

Suche nach "faux columns".

Live long and prosper,
Gunnar

[Florian]

DANKE!!!!!!!!!
DANKE!!!!!!!!!
DANKE!!!!!!!!!
DANKE!!!!!!!!!
DANKE!!!!!!!!!
DANKE!!!!!!!!!

[Beat]

Mein Layout besteht aus 4 DIV-Elementen, der Aufbau schaut ungefähr so aus (bzw. das hätte ich gerne):
+---------+
| Header  |
+----+----+
|Navi|Main|
+----+----+
| Footer  |
+---------+

Ich habe nur keinen Schimmer, wie ich die Höhe des Navi-DIVs (mit bgcolor) an die des Main-DIVs anpasse (die Höhe des Main-DIVs variiert je nach Inhalt)... Zumal beides min. bis zum Boden des Browserinnenfensters reichen soll, wo dann der Footer erscheinen soll.

Mir fallen zwei Stichworte ein
a) faux-column (google es selbst)
b) Du gibst main ein border-left in der Breite der Columne und weist border-left die gewünschte Hintergrundfarbe der columne zu.

mfg Beat

[Manuel Hirsch]

Ich habe nur keinen Schimmer, wie ich die Höhe des Navi-DIVs (mit bgcolor) an die des Main-DIVs anpasse (die Höhe des Main-DIVs variiert je nach Inhalt)...

So in etwa könnte es aussehen:

+-----------+
|   Header  |
+-----------+
|+----+----+|
||Navi|Main||
|+----+----+|
+-----------+
|   Footer  |
+-----------+

<div>Header</div>
<div style="background-color:#ffff00;">
 <div style="width:200px;float:left;">
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
 </div>
 <div style="margin-left:200px;background-color:#ff00ff;">
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  <div style="clear:both;"></div>
 </div>
</div>
<div style="">Footer</div>