如何根据可见的内部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高度时，它有一个滚动

回答

相关问题