ASP.NET MVC ＋ Bootstrap 縦リキッド

垂直方向のリキッドレイアウト

需要あるのかどうか微妙ですけど、縦（垂直）方向のリキッドレイアウトについて。

前回の「内部コンテンツの高さを100%」の方法でウィンドウサイズに合わせて内部コンテンツの高さを広げることができました。
ただ、この方法で高さを自動調節できるのは１階層だけで、コンテンツを入れ子にして高さを調節することはできません。前回の方法は

親コンテナのheightを100%に設定して画面全体に広げる

親コンテナにヘッダ・フッタを加味したpaddingを設定することで、ヘッダ・フッタを除いた領域を「画面全体」にする

子領域のmin-heightを100%にすることで、子領域の高さが「画面全体」より低い時は「画面全体」に高さが自動的に広がる

というものでしたが、

親要素のheightが明示的に指定されていない場合、子要素にheight: 100%、min-height: 100%を指定しても効かない

という法則があるため、min-height:100%の子要素に孫要素を更に追加して高さを自動的に拡張することはできません。
そのため、そのようなケースではjavascriptで要素の高さを取得・変更するのが一般的な代替案になると思います。
他には CSS3 の Flexible Box が普及すれば一発解決でしょうけど、現時点では非対応のブラウザが多いので選択候補外です。

display:table、display:table-rowを使って縦リキッド

で、javascriptしかないかなあ・・・、と思っていたのですが、display:table、display:table-rowを使って縦リキッドっぽいことが可能でした。
display:table-row のdiv要素に height: 100% を指定すると親要素（display:table）の余った領域を埋めるような形で高さを調節してくれます。
概念的には以下のような構成です。

css

.table100 {
  display: table;
  width: 100%;
  height: 100%;
}
.table100 > div {
  display: table-row;
}
.table100 > div > .body-content{
  height: 100%;
}
.height100 {
  height: 100%;
}

html

<div id="wrap" class="table100">
  <div id="div1">
    <div class="container body-content">
      固定エリア
    </div>
  </div>
  <div id="div2" class="height100">
    <div class="container body-content">
      可変エリア（ウィンドウサイズにより可変）
    </div>
  </div>
</div>