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; 

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