Inhalt auf mindestens ganzer Höhe

Hallo,

ich möchte dass meine Page immer mindestens die Fensterhöhe hat und nicht weniger.
Ich habe für den Header ein DIV mit 200px Höhe, einen Footer der unten am rand positioniert sein soll mit 100px Höhe.
Den Zwischenraum, dort wo der Hauptinhalt reinkommt, soll nun Fensterfüllend sein. Also so dass dass der Footer ganz unten ist und der Hauptinhalt gestreckt ist, selbst wenn nichts im Hauptinhalt drinsteht.

HTML:

<div class="Header"></div>
<div class="MainContent"></div>
<div class="Footer"></div>

CSS:

html, body
{
   height: 100%;
   width: 100%;
}


.Header
{
   width: 100%;
   height: 200px;
}


.MainContent
{
   width: 100%;
   height: 100% /* komplette Höhe füllen */
}


.Footer
{
   width: 100%;
   height: 100px;
}

Ich hoffe, es ist verständlich, was ich versuche zu erreichen.
Ich bekomme es so nicht hin, denn wenn ich den Hauptinhalt auf 100% strecke, geht der gesamte Inhalt über die Höhe _hinaus_, da ja Header und Footer bereits 300px einnehmen, ich würde aber gerne 100% vom rest benutzen. Bekomme das aber nicht hin. Hoffe, jemand weiß wie

Habe das ganze nochmal "aufgemalt": http://home.arcor.de/backfish/pics/divs.PNG