dynamische Höhe eines Elementes innerhalb eines div

[Sergio Klemensberger]

Hallo zusammen

Ich bin gerade daran, eine alte Homepage, die noch mit Tabellen aufgebaut ist, umzubauen. Dabei habe ich ein div für die Navigation. Innerhalb des div gibt es Link-Elemente (Anzahl Links je Seite unterschiedlich, da unterschiedliche Anzahl Untermenüs). Danach soll es einen gleichfarbigen Balken (leeres Element) geben, und unten noch einen Email-Link (gleicher Link wie bereits oben). Die gesamte Navigation soll nun immer die gleiche fixe Höhe haben, unabhängig von der Anzahl Menüs bzw. Untermenüs. Die Höhe des Navigation-divs ist 500px. Ich brauche also irgendeine Möglichkeit, dass das leere (<a>, <b> oder <p> oder noch etwas anderes?) einfach so gross ist, dass es den leeren Platz innerhalb des div Elementes auffüllt.

Hier ein Auszug aus dem bisherigen Code:

<div class="navigation">  
 <a class="menu" href="../startseite.php" target="_parent">Home</a>  
 <a class="menu" href="../aktuell.php">Aktuelles</a>  
 <a class="menu" href="../vereinsgeschichte.php" target="_parent">Vereinsgeschichte</a>  
 <b class="menu">Kontakt</b>  
 <b class="untermenu">Vorstand</b>  
 <a class="untermenu" href="trainer.php">Trainer</a>  
 <a class="untermenu" href="verantwortliche.php">Verantwortliche</a>  
 <a class="menu" href="../sponsoren.php">Sponsoren</a>  
 <a class="leer" href="">&nbsp;</a>  
 <a class="menu" href='mailto:[e-mail]'>Webmaster</a>  
</div>

Das dazugehörige CSS:

div.navigation {  
  position:absolute;  
  top: 60px;  
  left: 10px;  
  width: 170px;  
  height: 500px;  
  text-align: left;  
}  
  
a.menu {  
 display:block;  
 background-color: #001E50;  
 color: #FFFFFF;  
 height: 18px;  
 text-align: left;  
 width: 100%;  
 font-size:11pt;  
 padding-left: 10px;  
}  
  
a.untermenu {  
 display:block;  
 background-color:#46648C;  
 color: #FFFFFF;  
 height:18px;  
 width: 100%;  
 text-align: left;  
 font-size: 10pt;  
 padding-left: 10px;  
}  
  
b.menu {  
 display:block;  
 background-color: #001E50;  
 color: #FFFFFF;  
 height: 18px;  
 text-align: left;  
 width: 100%;  
 font-size:11pt;  
 padding-left: 10px;  
}  
  
b.untermenu {  
 display:block;  
 background-color:#46648C;  
 color: #FFFFFF;  
 height:18px;  
 width: 100%;  
 text-align: left;  
 font-size: 10pt;  
 padding-left: 10px;  
}  
  
a.leer {  
 display:block;  
 background-color: #001E50;  
 /*height: 100%;*/  
 width: 100%;  
}

Besten Dank schon im Voraus für eure Hilfe!
Gruss Sergio