css - 如何制作一个 div 元素的响应式设计

Question

我有容器 div 元素，其高度为 100%。buttonGroup div 元素是在jsp中填充的，它可以包含多个按钮，所以它的高度会动态增长。

buttonGroup div元素占据一定高度后，剩余高度应分配给displayArea div元素。如何在 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);