は、このマークアップとスタイルを考える親の残りのスペース

Question

埋めるために、垂直要素を拡大：

<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%; 
} 

を私は親に空きを埋めるために.expandを展開したいです。添付の画像を参照してください。

現在、親の現在の高さを計算し、そのheightプロパティを削除し、これらの2つの値の差に高さを.expandに設定します。複数の兄弟がある場合は、高さをその兄弟の数で割ったものです。

.expandもこの列の場合（この例では.b）、親の高さの100％を取得します。

$(".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);    
     } 
    }); 

このように動作しますが、動作するケースは限られています。 .expandsは、インライン要素とケースBにはできません別のマークアップが必要です。

<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> 

私はより適切な解決策があるかどうかを確認するために、この質問を残します。

これを達成する簡単な解決策はありますか？または、これを行うjQueryプラグインがありますか？私はこの特定のケースでは何も見つけることができませんでした。

ここでも同様の質問がありますが、この場合はマークアップを変更することはできません。display: tableまたはCSS flexは他の要素を混乱させるため、使用できません。私はJavaScriptソリューションを探しています。

簡単な例を示すために、スタイルは簡略化されています。他の同様のケース（左、初期状態、正しい予期された結果）を含む明瞭な画像。

これは例です。どのような要素があるのか​​、どのように配置されているのかにかかわらず、拡張すべきポイントです。

Answer 1

あなたは計算を行うためにoffsetHeightsを使用することができます。このフィドルは、ヘッダフッタと中央のコンテナ

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();