div 요소 반응 형 디자인을 만드는 방법

Question

높이가 100 % 인 컨테이너 div 요소가 있습니다. 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);