<div> soll 100% der Höhe einer <td> ausfüllen

[Ralf]

Hi,

ich möchte innerhalb einer Tabelle verschieden lange Texte darstellen. Am unteren Rand einer <td> soll noch eine Art footer stehen. Also in etwas so:

+----+----+----+
|test+test+test+
|    +foo +    +
|    +bar +    +
|    +    +    +
|foot+foot+foot+
+----+----+----+

Bei folgendem Code werden die <div class="foo"> nur jeweils so groß, dass der Inhalt reinpasst. Wie kann ich erreichen, dass die die <td> voll in der Höhe ausfüllen?

  
<style type="text/css">  
<!--  
.foo{  
	border: 1px solid red;  
	height:100%;  
  
}  
  
.unten{  
	vertical-align:bottom;  
}  
-->  
</style>  
  
<table border="1">  
	<tr>  
		<td>  
			<div class="foo">  
				ein Text  
				<div class="unter">footer</div>  
			</div>  
		<td>  
		<td>  
			<div class="foo">  
				ein Text<br>zweite Zeile  
				<div class="unter">footer</div>  
			</div>  
		<td>  
		<td>  
			<div class="foo">  
				ein Text  
				<div class="unter">footer</div>  
			</div>  
		<td>  
	</tr>  
</table>

Gruß

Ralf