Hm ich mache es so das ich einfach den height:; tag weglasse im mittleren div.

Leider nimmt er dann nicht die restlichen %.

Oder ganz leicht, du gibst d1 und d3 auch in % an.

So siehts bei mir aus und es klappt.

HTML-Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body { width: 100%; height:100%; margin:0px; padding:0px; } 
#outerdiv { width:100%; height:100%; } 
#d1 { width:100%; height:20%; background-color:#ff0000; } 
#d2 { width:100%; height:50%; background-color:#00ff00; } 
#d3 { width:100%; height:30%; background-color:#0000ff; }
</style>
</head>
<body>
<div id='outerdiv'>
	<div id='d1'>HEADER</div>
	<div id='d2'>CONTENT</div>
	<div id='d3'>FOOTER</div>
</div>
</body>
</html>