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

如何制作div元素响应式设计

2 个答案: