Höhe eines Elements anpassen

[Claudia]

Hallo,

ich habe ein div (#wrapper) das absolut auf meiner Seite positoniert werden soll.
Darin enthalten sind die Divs #tools mit einer festen Höhe und ein Div #main, welches die restlichen Pixel der Höhe des umschließenden Divs ausfüllen soll.

  
#wrapper {  
	position:absolute;  
	top:50px;  
	left:50px;  
	width:500px;  
	height:400px;  
	background-color: #F0F0F0;  
	border: 2px solid #871D33;  
	  
}  
#tools {  
	height:28px;  
	background-color:#999;  
}  
#main {  
	height: 100%;  
	border: 1px solid #666;  
	background-color:#FFC;  
}  

  
<div id="wrapper" >  
    <div id="tools" ></div>  
    <div id="main" ></div>  
</div>  

Leider überragt #main aber immer #wrapper um die Höhe von #tools, wie kann ich das ändern?
Hab schon viel probiert+gesucht, leider ohne Erfolg...
Dank + Gruß
Claudia