使div填充父高（jsfiddle）

Question

具体用例：

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

这是一个twitter引导选项卡，选项卡的内容包含：菜单层（固定但未知高度），第二部分我想填充选项卡窗格的剩余空间。

所以，我需要黄色窗格来填充其余的光照空间（10px填充除外），红色内容填充黄色空间（当然除了填充）。

最好的方法是，如果没有绝对定位标签窗格，是否可能？

代码（看起来小提琴更好）：

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有一个适合你的建议。

更新您的tab-pane和content课程：

.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;   
}

请参阅this jsFiddle。