Это может быть очень простой вопрос, но я некоторое время отсутствовал на CSS-сцене и не могу понять этого. Я использую платформу Bootstrap, и у меня есть фиксированный верхний и нижний колонтитулы. Контейнер между ними включает в себя панель навигации и область содержимого. Я хотел бы, чтобы этот контейнер заполнил все пространство (высота 100%) между верхним и нижним колонтитулом.

Вот jsFiddle проекта:http://jsfiddle.net/NyXkt/2/

Это текущая HTML-структура:

<div id="wrapper">
    <!-- Header -->
    <div class="container-fluid no-padding header">
        <div class="row-fluid fill-height">
            <!-- Header Left -->
            <div class="span2">
                <p class="center-text">Left</p>
            </div>
            <!-- Header Middle -->
            <div class="span8">
                <p class="center-text">Middle</p>
            </div>
            <!-- Header Right -->
            <div class="span2">
                <p class="center-text">Right</p>
            </div>
        </div>
    </div>
    <!-- Content Wrapper -->
    <div class="container-fluid no-padding fill">
        <div class="row-fluid">
            <div class="span2">
                <div class="well sidebar-nav-fixed no-padding">
                    <ul id="nav">
                        <li><a href="#">Item 1</a>

                            <ul>
                                <li><a href="#">Sub-Item 1 a</a>
                                </li>
                                <li><a href="#">Sub-Item 1 b</a>
                                </li>
                                <li><a href="#">Sub-Item 1 c</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 2</a>

                            <ul>
                                <li><a href="#">Sub-Item 2 a</a>
                                </li>
                                <li><a href="#">Sub-Item 2 b</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3</a>

                            <ul>
                                <li><a href="#">Sub-Item 3 a</a>
                                </li>
                                <li><a href="#">Sub-Item 3 b</a>
                                </li>
                                <li><a href="#">Sub-Item 3 c</a>
                                </li>
                                <li><a href="#">Sub-Item 3 d</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 4</a>

                            <ul>
                                <li><a href="#">Sub-Item 4 a</a>
                                </li>
                                <li><a href="#">Sub-Item 4 b</a>
                                </li>
                                <li><a href="#">Sub-Item 4 c</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="span10">
                <p class="center-text">Content</p>
            </div>
        </div>
    </div>
</div>
<!-- Footer -->
<div id="footer">
    <div class="container-fluid">
        <p class="center-text">Footer</p>
    </div>
</div>

Если бы кто-нибудь мог объяснить, что мне нужно сделать, или указать на пример, я был бы признателен.