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>