max: Dynamische Höhe von 100%

Beitrag lesen

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>