0

具体的なユースケース：

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

これはTwitterのブートストラップタブであり、タブのコンテンツには、メニューレイヤー（固定されていますが高さは不明）と、タブペインの残りのスペースを埋めたい2番目の部分が含まれています。

したがって、残りのライトグレーのスペース（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の質問には、あなたに役立つ提案があります。

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 に答える