Comment étirer la hauteur d'une div pour remplir la div parente - CSS

Question

J'ai une page avec div comme indiqué dans la présentation / capture d'écran ci-dessous :

Le code est ici :

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#B,
#C,
#D {
  position: absolute;
}

#A {
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #99CC00;
}

#B {
  top: 35px;
  width: 200px;
  bottom: 35px;
  background-color: #999999;
  z-index: 100;
  border: solid 4px #00CC00;
}

#B2 {
  margin-top: -35px;
  bottom: 0;
  background-color: #FFFFFF;
  width: 200px;
  overflow: scroll;
}

#B1 {
  height: 35px;
  width: 35px;
  margin-left: 200px;
  background-color: #CC0066;
}

#C {
  top: 35px;
  left: 200px;
  right: 0;
  bottom: 35px;
  background-color: #CCCCCC;
}

#D {
  bottom: 0;
  width: 100%;
  height: 35px;
  background-color: #3399FF;
}

<div id="container">
  <div id="A">A</div>
  <div id="B">
    <div id="B1">B1</div>
    <div id="B2">B2</div>
  </div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

Je veux ajuster la hauteur de B2 div pour remplir (ou étirer jusqu'à) l'ensemble de la B div (marqué d'une bordure verte dans l'image) et ne veulent pas traverser le pied de page D div . Voici un violon qui fonctionne lien (mise à jour). Comment puis-je résoudre ce problème ?

Answer 1

Je résoudrais le problème avec une solution javascript (jQUery) si les tailles peuvent varier.

window.setTimeout(function () {

$(document).ready(function () {

    var ResizeTarget = $('#B');

    ResizeTarget.resize(function () {

        var target = $('#B2');

        target.css('height', ResizeTarget.height());

    }).trigger('resize');

}); }, 500);