Code: 
edit:
overflow: auto; zu #content hinzugefügt. Sonst läuft der Inhalt bei Übergröße unter dem Footer weiter.
Dann kann man es auch gleich anders machen ohne komische CSS-3 Features.

Code (CSS): 
#header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 300px;
}
 
#navi {
   position: absolute;
   top: 300px;
   bottom: 300px;
   left: 0;
   width: 400px;
   overflow: auto;
}
 
#content {
   position: absolute;
   top: 300px;
   bottom: 300px;
   left: 400px;
   right: 0;
   overflow: auto;
}
 
#footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 300px;
}



Allerdings glaube ich das Whiz-zarD nicht unbedingt möchte das der footer immer am unteren Bildschirm Rand steht.
In dem Fall geht es einfach nicht das die DIVs immer gleich hoch sind. Hier hilft nur die navi und den content in ein div zupacken und diesem ein Hintergrundbild zu geben, welches die Hintergrundfarbe eben bis nach unten durchzieht:

Einfachheit halber mal mit inline-css:
HTML-Code: 
<div id="content" style="background: ...;">
   <div id="navi" style="float: left; width: 300px;"></div>
   <div id="content_main" style="float: left; width: 500px;"></div>
   <div style="clear: both;"></div>
</div>