0

具体用例：

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;
}
​
4

1 回答 1

1

这个 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;   
}

看到这个 jsFiddle。

于 2012-12-01T22:29:45.987 回答