Extension verticale de l'élément pour remplir l'espace restant du parent

Question

Compte tenu de ce balisage et de ces styles :

<div class="a">
  <div class="b">Fixed height</div>
  <div class="b">Fixed height</div>
  <div class="expand">Expand</div>
  <div>Fixed height</div>
</div>

.a {
  float: left; width: 100%; height: 500px;
}
.a>div {
  float: left; width: 100%;
}
.b {
  width: 50%;
}

Je veux me développer .expand pour remplir l'espace vide du parent. Voir l'image ci-jointe.

La tentative actuelle consiste à calculer la hauteur actuelle du parent, à supprimer son nom et son adresse. height et définir la hauteur de la propriété .expand à la différence de ces deux valeurs. S'il y a plus d'une .expand frères et sœurs, la hauteur est divisée par le nombre d'entre eux.

Si le .expand est également une colonne ( .b dans cet exemple), ils obtiennent la totalité de la hauteur de leur parent.

$(".expand").css({height:"auto"}).each(function() {
        var parent=$(this).parent();

        if($(this).is(".b")) {
            $(this).css("height",$(parent).innerHeight());
        } else {
            var siblings=$(parent).children(".expand");
            var siblingsTotalH=0;
            $(siblings).each(function() { siblingsTotalH+=$(this).outerHeight(); });            

            var currentH=$(parent).innerHeight();
            var currentCssH=$(parent).css("height"); //Save the value to restore it later
            $(parent).css("height","auto");

            var minH=$(parent).innerHeight()-siblingsTotalH;            
            var dif=(currentH-minH)/siblings.length;

            if(dif>0) $(this).css("height",dif);

            $(parent).css("height",currentCssH);            
        }
    });

De cette façon, cela fonctionne mais les cas de figure sont limités. .expands ne peuvent pas être des éléments en ligne et le cas B nécessite un balisage différent :

<div class="a">
      <div class="b">Fixed height</div>
      <div class="b">Fixed height</div>
      <div class="expand">
           <div class="b expand">Expand</div>
           <div class="b expand">Expand</div>
      </div>
      <div>Fixed height</div>
    </div>

Je laisse cette question afin de voir s'il existe une solution plus adaptée.

Existe-t-il une solution simple pour y parvenir ? Ou existe-t-il un plugin jQuery qui permet de le faire ? Je n'en ai pas trouvé pour ce cas particulier.

Bien qu'il y ait des questions similaires ici, dans ce cas, je ne peux pas modifier le balisage ou utiliser la fonction display: table ou CSS flex parce que cela va perturber les autres éléments. Je suis à la recherche d'une solution JavaScript.

Les styles sont simplifiés pour montrer un exemple facile à lire. Image à clarifier incluant d'autres cas similaires (à gauche, état initial, à droite, résultats attendus).

Ce sont des exemples. L'objectif est de s'étendre, quels que soient les autres éléments présents ou leur disposition.

Answer 1

Vous pouvez utiliser offsetHeights pour effectuer des calculs. Ce test montre comment créer un en-tête, un pied de page et un conteneur central.

https://jsfiddle.net/stevenkaspar/hk1escoj/

<div id='header'>
  header
  <p>
    another line
  </p>
</div>
<div id='container'>
  container
</div>

<div id='footer'>
  container
</div>
var resize = function(){
  var windwow_height = window.innerHeight;
  var footer_height = document.getElementById('footer').offsetHeight;
  var header_height = document.getElementById('header').offsetHeight;
  var container_height = windwow_height - (header_height + footer_height);

  document.getElementById('container').style.height = container_height + 'px';
}

window.onresize = resize;
resize();