css: divs oben und unten mit absoluter Höhe, in der mitte den Re

[kartoffelsack]

Hab ne Seite mit header-Zeile, footer-Zeile und dem Content dazwischen, möchte wenn möglich kein table-Layout machen:

<div style="position:absolute; top:0px; left:0px; width:100%; height:10%; z-index:0; background-color:green;">
 <p>head</p>
</div>

<div style="position:absolute; top:10%; left:0px; width:100%; height:80%; z-index:0; background-color:red;">
 <p>content</p>
</div>

<div style="position:absolute; top:90%; left:0px; width:100%; height:10%; z-index:0; background-color:blue;">
 <p>body</p>
</div>

Bei dieser Darstellung ist das Problem, dass beim vergrößtern/verkleinern des Fensters, alle drei Bereiche entsprechend vergrößert/verkleinert werden. Was ich aber möchte, ist, dass Header und footer z.B. immer 20px hoch sind, und der Content den restlichen Bereich einnimmt. Wie krieg ich das hin?