css - 滚动条未显示到导航选项卡内容 Bootstrap

Question

我有右侧栏，它用导航选项卡表示，我想显示滚动条到选项卡内容但它没有显示我想将动态数据加载到第一个导航选项卡但由于滚动条没有显示我无法滚动。

.right-sidebar-wrapper #r-s-tab{
  overflow-y: auto;
  height: 100%;
  position:fixed;
}
.right-sidebar-wrapper #activity a, .right-sidebar-wrapper #locations a{  
  padding-top: 8px;
  border-radius: 3px;
  display: block;
}
#activity a img, #locations a img {
  height: 120px;
  width: 100%;
}

<div class="right-sidebar-wrapper">
    <div id="r-s-tab" class="tab-content">
        <div class="tab-pane fade active in" id="activity">
            <div class="col-lg-12">
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
                <a href="#">
                    <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
                </a>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="locations">
        <div class="col-lg-12">
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
            <a href="#">
                <img src="http://placehold.it/350x150" class="img-responsive img-rounded">
            </a>
        </div>
    </div>
<div>

Answer 1

你试试这个....

.right-sidebar-wrapper{
  height: 100%;
}
.right-sidebar-wrapper #r-s-tab{
  position:fixed;
}
.right-sidebar-wrapper #r-s-tab{
  height: 200px; // Set this height to the appropriate size
  overflow-y: scroll; // Only add scroll to vertical column
}