Einen Ansatz hab ich schon selbst gefunden!
Nur wie schaffe ich es jetzt hier das die drei Elemente der Mitte
sich automatisch der Höhe im Zwischenraum anpassen!?
<html>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
div.main { width: 100%; background-color: #eee; height: 100%; }
#head { height:70px; min-height: 70px; width: 100%; background-color: red; }
#navi { float: left; max-height:98%; width: 180px; background-color: yellow; }
#info { float: left; width: 300px; background-color: #aaa; }
#last { float: left; background-color: blue; margin:auto; }
#end { clear: both; width: 100%; background-color: green; height: 70px; position: absolute; top:100%; margin-top:-70px; }
</style>
<bod>
<div class="main">
<div id="head">head</div>
<div id="navi">navi</div>
<div id="info">info</div>
<div id="last">last</div>
<div id="end">end</div>
</div>
</body>
</html>