css - div要素をレスポンシブデザインにする方法

Question

高さが100％のコンテナdiv要素があります。buttonGroup div要素はjspに入力され、複数のボタンを含めることができるため、高さは動的に増加します。

buttonGroup div要素が特定の高さを占めた後、残りの高さをdisplayAreadiv要素に割り当てる必要があります。css3でこれを行う方法は？デザインはレスポンシブでなければなりません。

<div id="container" style="height: 100%;">
      <div id="buttonGroup">
             <input id="testbtn" type="button" value="Test">
      </div>
      <div id="dislayArea">
          ------ data ------
      </div>
</div>

Answer 1

これにはdisplay:tableプロパティを使用できます。次のように書きます。

#container{
    display:table;
    width:100%;
    height:100%;
    border:1px solid red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#buttonGroup{
    background:red;
    display:table-row;
    height:20%;
}
#dislayArea{
    background:green;
    display:table-row;
}

これをチェックしてくださいhttp://jsfiddle.net/DV2F5/

Answer 2

これを実現するには、jQuery を使用できます。

お気に入り：

var bgh = $(document).height() - $("#buttonGroup").prop('scrollHeight');
$("#displayArea").height(bgh);