Question

我正试图找到一种强制所有div与元素中最高div相同的高度的方法。我在this plunker

中找到了一个很好的来源

当我打开页面时，所有div都具有相同的高度，但问题是当我调整浏览器大小时，图像会调整大小，但div保持相同的高度，这会导致一些失真。

.directive('equalizeHeight', ['$timeout', function($timeout){
    return {
      restrict: 'A',
      controller: function($scope){
        console.log('equalizeHeightFor - controller');
        var elements = [];
        this.addElement = function(element){
          console.log('adding element:', element);
          elements.push(element);
          console.log(elements);
        }

        // resize elements once the last element is found
        this.resize = function(){
          $timeout(function(){
            console.log('finding the tallest ...');
            // find the tallest
            var tallest = 0, height;
            angular.forEach(elements, function(el){
              height = el[0].offsetHeight;
              console.log('height:', height);
              if(height > tallest)
                tallest = height;
              // console.log(el);
            });
            console.log('tallest:', tallest);
            console.log('resizing ...');
            // resize
            angular.forEach(elements, function(el){
              el[0].style.height = tallest + 'px';
            });
            console.log('-- finished --');
          }, 0);
        };
      }
    };
  }])

  .directive('equalizeHeightAdd', [function($timeout){
    return {
      restrict: 'A',
      require: '^^equalizeHeight',
      link: function(scope, element, attrs, ctrl_for){
        console.log('equalizeHeightAdd - link');
        // add element to list of elements
        ctrl_for.addElement(element);
        if(scope.$last)
          ctrl_for.resize();
      }
    };
  }])
  ;

Answer 1

不要这样做。使用flexbox。这是an article describing your use case。我用Google搜索“flexbox equal height”。

强制div与内部图像具有相同的高度

1 个答案: