如何根據可見的內部div高度調整外部div高度時，它有一個滾動

我有以下示例html。文件變量是整數的簡單陣列，如[1,2,3,4,5,6]如何根據可見的內部div高度調整外部div高度時，它有一個滾動

<!doctype html> 
 
<html ng-app="Application"> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <!--<script src="../app.js"></script> 
 
    <script src="../Controller/applicationCtrl.js"></script>--> 
 

 
    <script> 
 
     var app = angular.module('Application', []); 
 
     var applicationCtrl = function ($scope) { 
 
      $scope.files = [1,2,3,4,5,6]; 
 
      $scope.showAll = false; 
 
     }; 
 

 
     app.controller('vm', applicationCtrl); 
 
    </script> 
 
    <style> 
 
     .J1 { 
 
      overflow-y: scroll; 
 
      height: 70px; 
 
     } 
 
    </style> 
 
</head> 
 
<body ng-controller="vm"> 
 
    <div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}"> 
 
     <div ng-repeat="file in files" style="border-width: 1px; border-style: solid;"> 
 
      <span>{{file}}</span> 
 
      <input type="button" value="{{'btn' + file}}"></input> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
    <a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a> 
 
    </div> 
 
</body> 
 
</html>

如果文件數組的長度是3個以上，然後將其添加溢出CSS到div。但我也將div的高度設置爲固定值。我想要做的是根據前三個div的高度來設置div的高度，而不需要爲其設置固定值。我怎樣才能做到這一點？

來源

2016-05-15 Jami

您可以試試這個。我已經添加了jQuery CDN。儘管你可以用原始的javascript做到這一點。

<!doctype html> 
 
<html ng-app="Application"> 
 
<head> 
 
    <title></title> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('Application', []); 
 
    var applicationCtrl = function ($scope) { 
 
     $scope.files = [1,2,3,4,5,6]; 
 
     
 
    /* Set the parent div's height */ 
 
     $(function(){ 
 
      $('.J1').height($('.each-button').outerHeight() * 3); 
 
     }); 
 
    
 
    }; 
 

 
    app.controller('vm', applicationCtrl); 
 
</script> 
 
    <style> 
 
     .J1 { 
 
      overflow-y: scroll; 
 
     } 
 
    </style> 
 
</head> 
 
<body ng-controller="vm"> 
 
    <div style="width: 100px;" class="J1"> 
 
     <!-- new class has been added -->  
 
     <div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;"> 
 
      <span>{{file}}</span> 
 
      <input type="button" value="{{'btn' + file}}"></input> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
     <a href>Show more</a> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-05-15 15:09:08 Pranab

感謝您的回答。但是，我一直在尋找可以通過angularJS完成的事情。 – Jami

如何根據可見的內部div高度調整外部div高度時，它有一個滾動

回答

相關問題