展开子元素高度，以保留容器中剩余的空间

Question

Ok, so let me explain my problem here, i have a "typeSelector" that should be 100% of the page, and inside of it i want few divs that are "filters" and below them there should be a list. The filters could be 0, 1, or 2, so i don't know how much space will they take, and i want the list below them to expand for the space that is left in the container but when i put the list to be 100% the page shows a scrollbar... I want the page to fit 100% without showing a scrollbar and i want the list to expand for 100% of the height of the page and when there are more items the scrollbar should appear. When i remove the "filter" divs from the container the list is expanding good no matter how i resize the window, but when they are there everything is messed up. Here's the layout:

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

I made a jsFiddle with my problem here:

http://jsfiddle.net/rb6WJ/

Hope someone can help.

Thanks!

Answer 1

Add the following jQuery code to your fiddle:

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

You need to subtract also the margin-bottom of 3 pixels.

Working demo: http://jsfiddle.net/VVxY7/