滚动条未显示到导航选项卡内容引导程序

Question

我有右侧栏，它用nav选项卡显示，我想显示滚动条到tab-content但是它没有显示我想将动态数据加载到第一个navtab但由于滚动条没有显示我无法滚动。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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
}