无法获得正确的元素高度

Question

我有一个指令，其目的是将孩子的身高设置为与父母相等。

我不能为此使用 height: inherit; 或 height: 100%;。

问题是无论我做什么，outerHeight(true) 都会返回错误的高度。它返回175 的高度应该更接近720 左右，这对我来说没有任何意义..

这是一个 plunkr：http://plnkr.co/edit/7TeTrw9RsTgR7mfzzDg0?p=preview，但我没有设法让指令在其中运行。在 jsFiddle 中遇到了同样的问题，不知道我在那里做错了什么，但我希望有人知道如何解决它并可以在其中玩耍。

我使用过outerHeight()、outerHeight(true)、height() 和.css('height')，但它们都返回175 作为高度。

编辑：我什至尝试了将列设置为相等高度的第三方插件，但该插件的高度也错误。

编辑 2： 我还发现它实际上正在工作，但只有在您调整了窗口大小之后.. 指令是在元素获得其高度之前运行还是什么？

编辑 3： 我找到了一个可行的解决方案，但它不是最佳解决方案，因为它会导致 200 毫秒的延迟，因此会导致元素在执行后跳下：

core.directive('heightInheritance', ['$timeout', function($timeout) {

  return {
    restrict: 'A', 
    link: function(scope, element, attrs) {

      $timeout(function(){

        var parentHeight = element.parent().outerHeight(true);

        element.css('height', parentHeight + 'px');

        $(window).resize(function() {

          parentHeight = element.parent().outerHeight(true);

          element.css('height', parentHeight + 'px');

          console.log(element.parent().css('height'));
        });

      }, 200);
    }
  }
}]);

这个解决方案来自这里：How can I run a directive after the dom has finished rendering?

但是，这表明您应该立即执行此操作，但只要我低于 200 毫秒，我就会得到与以前相同的结果。我想我会导致路线本身的延迟，但不幸的是，这也无助于解决问题。有什么办法可以消除这里的延迟吗？

我看过这些问题：

How to calculate element's width and height with their padding / margin values using less code?

jquery: wrong values when trying to get div height

jQuery height() returning false values

但他们基本上都说同样的话，他们的答案不起作用。

这是我的指令：

core.directive('heightInheritance', [function() {

  return {
    restrict: 'A', 
    link: function(scope, element, attrs) {

      var parentHeight = element.parent().outerHeight(true);

      element.css('height', parentHeight + 'px');
    }
  }
}]);

高度基于设置左列高度的图像。通过使用 Bootstrap 的 row-eq-height 类，它将使所有直接列的高度相同。这工作正常，但现在我需要在右列内创建一个.row 以继承右列的高度。

<div class="row row-eq-height">
  <div class="col-sm-1 col-lg-2 hidden-xs"></div>
  <div class="col-xs-12 col-sm-4 col-lg-3">
    <img ng-src="somepath" class="image"> <!-- sets the height of the col -->
  </div>
  <div class="col-lg-5">
    <div data-height-inheritance class="row"> <!-- need this to inherit height from parent -->
      <div class="col-sm-1"></div>
      <div data-height-inheritance class="col-sm-10"></div>
      <div class="col-sm-1"></div>
    </div>
  </div>
</div>

什么可能导致此问题？我不知道这里还能做什么。

Answer 1

我没有足够的声誉来添加评论，但是您是否尝试在获取高度之前将style="overflow-y:hidden" 添加到父元素（您可以在之后重置它）。我遇到了溢出影响 js 高度值的问题。