css修复页面的标题

Question

我想创建一个内部滚动条并删除外部滚动条，以便修复标题，用户可以看到标签名。当数据更多时，内部滚动条应该会出现在页面中滚动内容。我是在我的应用程序中使用bootstrap。有什么建议？ 请找到演示here

HTML：

<div class="container-fluid" ng-controller="tabsctrl">

    <br><br>
<div>
 <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
            </li>
        </ul>

         <div class="tab-content">
          <!--Tab1 data div-->
         <div role="tabpanel" class="tab-pane active" id="tabx">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>


                        <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>

                            <div>
                            <div class="tab-content">
                                <div>
                              asdasd
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                                 </div>
                            </div>
                                </div>

                        </div>
                    </div>
                </div>

Answer 1

为您的内容设置特定的最大高度，并允许使用css：

滚动它

max-height: 100px; 
overflow: scroll;

＆＃13;

＆＃13;

<div ng-app="tabs">

  
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid" ng-controller="tabsctrl">
    
    <br><br>
<div>
 <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" ></a>
            </li>
        </ul>
        
         <div class="tab-content">
          <!--Tab1 data div-->
         <div role="tabpanel" class="tab-pane active" id="tabx">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>

                             
                        <div class="row ">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>

                            <div>
                            <div class="tab-content" style="max-height: 100px; overflow:scroll">
                                <div>
                              asdasd
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                                 </div>
                            </div>
                                </div>
                             
                        </div>
                    </div>
                </div>
                                
<!--//-->
<div role="tabpanel" class="tab-pane active" id="tabx">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>

                             
                        <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <!--heading here-->
                            </div>

                            <div>
                            <div class="tab-content" style="max-height: 100px; overflow:scroll">
                                <div>
                              asdasd
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                                 </div>
                            </div>
                                </div>
                             
                        </div>
                    </div>
                </div>

                        </div>
                    </div>
                </div>
            </div>
            </div> </div>
            </div> </div>

＆＃13;

＆＃13;

＆＃13;