展開容器中剩餘空間的子元素高度

Question

好吧，讓我在這裏解釋我的問題，我有一個「typeSelector」，它應該是頁面的100％，並且在其中我需要幾個div是「過濾器」，在它們下面應該有一個列表。過濾器可能是0,1或2，所以我不知道他們需要多少空間，我想讓它們下面的列表擴展爲留在容器中的空間，但是當我把列表放到100％的頁面顯示滾動條...我希望頁面適合100％而不顯示滾動條，並且我希望列表可以擴展100％的頁面高度以及滾動條應該出現的更多項目。當我從容器中刪除「過濾器」div時，無論我如何調整窗口大小，列表都會擴展好，但是當它們在那裏時，一切都會搞砸。 這裏的佈局：

<div id="ftsContainer"> 
<div id="typeSelector"> 
    <div id="filtersContainer"> 
     <div class="filtersEtc"> 
      List filter here 
     </div> 
     <div class="filtersEtc"> 
      List filter here 
     </div> 
     <div class="filtersEtc"> 
      List filter here 
     </div> 
    </div> 
      <ul id="selectorList"> 
      <li> test 1 </li> 
      <li> test 2 </li> 
      <li> test 3 </li> 
      <li> test 4 </li> 
      </ul> 
    </div> 
</div> 

我做了一個的jsfiddle我的問題就在這裏：

http://jsfiddle.net/rb6WJ/

希望有人可以提供幫助。

謝謝！

Answer 1

以下的jQuery代碼添加到您的提琴：

var fCH = $("#filtersContainer").height(); 
var tSH = $("#typeSelector").height(); 
$("#selectorList").height(Number(tSH) - Number(fCH) - 3); 

您也需要減去3個像素的邊距。

工作演示：http://jsfiddle.net/VVxY7/