Jquery 如何获取一个div的高度并将其应用于另一个加载的div，以及如何使用AngularJS调整大小

我基本上有这样一个div集合：

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<!-- HTML -->

<items>
    <item ng-repeat="item in items"></item>
</items>

然而，角度让我困惑，我似乎不知道如何A）获得元素高度，B）如何在调整大小和加载时更新

更新：

HTML

<div class="items" resizeContainer>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

---

我的问题是，现在这仍然不起作用，我觉得我接近容器的高度，但我甚至无法让

控制台.log

正常工作。

如果您知道您将始终拥有6项，为什么不使用纯css解决此问题

基本上只需将每个项目的高度设置为100/6，或

高度：16.667%

---

如果项目集是动态的，则必须创建一个自定义指令，并将其应用于

项目

div。例如：

那么你的指令应该：

• 获取items div的高度
• 数一数孩子的数量
• 遍历每个孩子并通过css相应地设置高度
• 绑定到resize事件并同时更新
• 不要忘记使用

  $timeout

  在加载时运行，以便在渲染项目后进行计算

---

如果每次都有一定数量的元素，那么可以使用简单的CSS百分比表示每个子元素的高度

如果子元素的数量是动态的，则可以执行以下操作：

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<!-- HTML -->

<items>
    <item ng-repeat="item in items"></item>
</items>

---

但是，此解决方案将指令与代码中的

项
模型相结合（如果您有这样的模型）。
您可以使用纯CSS实现这一点。
看到一个正在工作的人

要使用这种技术，您需要为非内容元素（如页眉、边栏和页脚）设置固定的高度。
您可以将CSS与CSS和

检查plunk，如果您需要更多说明，请告诉我。
我注意到的第一件事是您正在更改'elem'的css，但在函数中您将其定义为'element'，因此请尝试将'elem'更改为'element'。我几乎可以肯定这是你的问题，因为我看不出代码还有其他问题
 很简单，首先使用下面的表达式获得父潜水的高度

angular.element(document.querySelector('#PARENT_DIV_ID'))[0].offsetHeight

或者，如果您可以自由使用javascript，则可以使用document.getElementById而不是document.querySelector

用child的长度除以上方高度，然后通过指令以如下方式设置child div的高度：

    angular.module('myApp', []).directive('child_div', function() {
    return function (scope, element, attrs) {
        element.height(attrs.new_height);
    }
});

在上面的指令中，您已经看到在每个“child\u div”中都检查了一个“new\u height”属性。因此，在创建child div pass指令'child_div'和从上述计算得到的attr new_height时

如果您对指令有任何疑问，请参阅此视频

我建议使用指令，因为所有的DOM制作都是在指令中完成的。
我决定我实际上需要CSS方法和Angular方法之间的交叉。我可以使用CSS来调整子项的大小，但是实际的容器项需要使用angular来调整大小。我已经用细节更新了原来的帖子。
angular.element(document.querySelector('#PARENT_DIV_ID'))[0].offsetHeight

    angular.module('myApp', []).directive('child_div', function() {
    return function (scope, element, attrs) {
        element.height(attrs.new_height);
    }
});