Question

Concrete use case:

http://jsfiddle.net/MgcDU/271/

There this a twitter bootstrap tabs, and content of the tab contains: menu layer (fixed but unknown height), and second part that I want to fill the rest space of the tab pane.

So, I need yellow pane to fill rest of lightgray space (excepting 10px padding) and red content fill yellow space (except padding of course).

What is the best way to do that, is it possible without absolute positioning of the tab-pane?

The code (it is better to look fiddle):

HTML:

<div class="container">
    <div class="tabs-above">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#" data-toggle="tab">Tab1</a></li>
                <li><a href="#" data-toggle="tab">Tab2</a></li>
                <li><a href="#" data-toggle="tab">Tab3</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active">
                    <div class="menu">
                        <div class="input-prepend btn-group">
                            <button class="btn btn-inverse dropdown-toggle">Select</button>
                            <select class="span1" ></select>
                        </div>
                    </div>
                    <div class="content">
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                    </div>
                </div>
            </div>
        </div>
</diV>​

Css:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    position: absolute;
    top: 0; left 0;
    width: 200px;
    height: 300px;          
    background: lightgray;        
    padding: 10px;
}

.tab-pane {
    background: yellow;            
    padding: 10px;
}

.content {
    background: red;
    height: 100px;
    width: 100%;
    overflow: auto;
}
​

Answer 1

This SO question has a suggestion that would work for you.

Update your tab-pane and content classes:

.tab-pane {
    background: yellow;            
    padding: 10px;
    top: 55px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    position:absolute;
}

.content {
    background: red;
    overflow: auto;
    position: absolute;
    left:10px; right: 10px;
    bottom: 10px;
    top: 50px;   
}

See this jsFiddle.