如何使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

您可以使用顯示：表屬性用於此。像這樣寫：

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