展开容器中剩余空间的子元素高度

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/