Hoi friends!

Ich hab ein style problem mit CSS, und ich werd bald irre.
Ich möchte ein 3-zeilen layout:
------
KOPF = 80px height
------
CONTENT = REST
------
FOOTER = 300px height
------

Alles = 100% der seite.
Frage: WIE?! *g* Es funzt alles, solange es im Quirks mode läuft. Sobald ich aber den DOCTYPE angebe wars das. ^^

Zuerst hab ichs mit einer Tabelle versucht.
HTML-Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html style="width:100%; height:100%;">
<body style="width:100%; height:100%;">
<table style="width:100%; height:100%;">
<tr>
<td style="height:80px;">
HEADER
</td>
</tr>
<tr>
<td>
CONTENT
</td>
</tr>
<tr>
<td style="height:300px;">
FOOTER
</td>
</tr>
</table>
</body>
</html>
--> http://www.lucleonhart.de/try/table_try.html Im FF alles klar, im IE gibts schwachfug. Erklärung über Google: "Der IE unterstützt nur im Quirks mode td - höhenangaben" ......

Dann halt mit divs. Hier hab ich das Problem: Wie sag ich dem "mittleren" Div, das es den "rest" ausfüllen soll?! Sobald ich dem div die höhe 100% gebe, wird es 100% der SEITE hoch.. *heul*
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:80px; background-color:#ff0000; }
#d2
{ width:100%; height:100%; background-color:#00ff00; }
#d3
{ width:100%; height:300px; 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>
--> http://www.lucleonhart.de/try/div_try.html

Bitte helfen!!!