带有Bootstrap的可滚动选项卡内容

Question

在固定高度的容器中，我想让标签内容滚动，将标签保留在顶部。

<div class="bs-example bs-example-tabs" style="height: 200px; border: 1px solid black">

    <ul id="myTab" class="nav nav-tabs">
        ...     
    </ul>

    <div id="myTabContent" class="tab-content">
        This is long and must scroll, tabs must stay on top
        ....
    </div>

</div>   

请参阅http://jsfiddle.net/graemian/Wxr9d/3/

我找到了一个使用flex布局的解决方案：

http://jsfiddle.net/graemian/wefPL/1/

（仅限Chrome），但肯定还有另一种更简单的方法吗？

Answer 1

您可以使用overflow：auto

模拟滚动

.bs-example{
   position: relative;
}

.tab-pane{
   position: absolute;
   top: 42px;
   bottom: 0;
   right: 0;
   left: 0;
   overflow:auto;
}