html - 使 div 填充父高度(jsfiddle)

Question

具体用例:

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

这是一个 twitter bootstrap 选项卡，选项卡的内容包含:菜单层(固定但未知高度)，以及我想填充选项卡 Pane 其余空间的第二部分。

所以，我需要黄色 Pane 来填充其余的浅灰色空间(10px 填充除外)，红色内容填充黄色空间(当然除了填充)。

做到这一点的最佳方法是什么，是否可以不对选项卡 Pane 进行绝对定位？

代码(最好看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有一个适合您的建议。

更新您的 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 .