Divs untereinander

[Smart]

Hallo Forum,

ich aheb ein Problem, das ich bis heute nicht ganz lösen konnte. Ich habe drei div-Elemente, die untereinander positioneiret werden müssen mit folgenden voruassetzungen:

1. Das erste div-element muss "fix" positioniert sein.
2. Das zweite div-element darunter muss eine 100% height haben.
3. Das dritte div-element muss eine fixe höhe haben.

Das problem ist nun folgendes:

1. Das zweite (mittlere) div-element verschiebt sich so unter das erste div-Element. Das zweite div-element soll unmittelbar unter dem erste div-Element anfangen.
2. die "height:100%;" von dem mittleren div-element verschiebt das dritte div-element außerhalb des Sichtbereichs und man bekommt einen Scrollbalken.

<style>

#div-container1 {
   position:fixed;
   top:0;
   background-color:red;
   width:100%;
   height:150px;
}

#div-container2 {
   background-color:yellow;
   width:100%;
   height:100%;
}

#div-container3 {
   background-color:blue;
   width:100%;
   height:100%;
}
</style>

<div>
    <div id="div-container1"></div>
    <div id="div-container2"></div>
    <div id="div-container3"></div>				
</div>

Wie kann man dieses Vorhaben erreichen?

Danke im Voraus.