Как отрегулировать внешнюю высоту div на основе видимых внутренних высот div, когда у него есть свиток

Question

Как отрегулировать внешнюю высоту div на основе видимых внутренних высот div, когда у него есть свиток

0

У меня есть следующий образец html. Переменная файлов - это простой массив целых чисел, например [1,2,3,4,5,6]

<!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 на основе высот первых трех разделов на лету без установки для нее фиксированного значения. Как я могу это достичь?

Jami 15 май 2016, в 16:54

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Pranab · Answer 1 · 2016-05-15T12-10-00.000Z

Вы можете попробовать это. Я добавил 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 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>

Спасибо за ответ. Тем не менее, я искал что-то, что можно сделать с помощью angularJS.