Javascript 使用jquery自动调整div高度

我不是一个喜欢javascript的人，所以如果我做的还可以，我会有点不知所措

我有3列div，其中包含动态内容和不同数量的子div

我希望动态调整高度大小，使它们与最高列的高度相同，并且任何差异都均匀分布在每个较短列的div中。以下是我的意思：

我已经拼凑了一些非常丑陋的js，看起来很有效。。。但是看起来很可怕。有没有更好的方法可以让别人推荐？它在加载时似乎也有点慢，有没有办法让它更快

   myHeightTest = function(container){
    var listOFHeights = new Array(),
        tallestContainer = 0;
    $(container).each(function(){
      listOFHeights.push($(this).height());
    });

    //Get the tallest
    tallestContainer = Math.max.apply(null,listOFHeights);

    //check I can calculate the hieght
    console.log('tallest: ' + tallestContainer);

    adjustChildHeights = function(parent,height) {
      var countKids = 0;
      $(parent.children('.flex-item')).each(function(){
        countKids += 1;
      });
      var offset = (height/countKids);
      $(parent.children('.flex-item')).each(function(){
        $(this).css('min-height',$(this).height() + offset);
      });
    }
    //now loop through and adjust
    $(container).each(function(){
      adjustChildHeights($(this),(tallestContainer - $(this).height()));
    });

  }

    $(window).load(function() {
  myHeightTest('.myflex-col');
    });


    $(window).resize(function(){
  myHeightTest('.myflex-col');
    });

---

除非我误解了你的问题，否则我认为你可以通过使用flexbox的CSS轻松实现这一点，这里不需要任何花哨的javascript。这里有一个例子（我没有做任何填充或空白，所以它有点难看，但我认为它会给你的想法

<div id="outside">
    <div class="column">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim iaculis orci eget malesuada. Quisque auctor orci ipsum, in ornare felis volutpat ut. Integer nec laoreet ex. Sed nec feugiat erat. Vestibulum vel suscipit dui. Aenean ultricies feugiat pulvinar. Donec eu luctus lorem. Integer dapibus dolor nibh, nec aliquet velit dapibus a. Nulla accumsan, sapien eu scelerisque convallis, ligula est lobortis libero, at tincidunt justo ligula maximus elit.</p>
        </div>
        <div class="child">
            <p>Sed aliquam est hendrerit mattis vestibulum. Aliquam consectetur, sapien ut placerat ullamcorper, risus orci malesuada dolor, eu consequat eros arcu a risus. Ut congue condimentum nisi nec dignissim. Sed laoreet purus orci, sit amet vestibulum metus tempus quis. Vestibulum facilisis nibh nisl. Aenean semper pharetra sem eu ultricies. Curabitur ut velit tortor. Aliquam vel metus consectetur ante suscipit rutrum. Duis volutpat hendrerit augue, vitae pretium orci laoreet vel.</p>
        </div>
        <div class="child">
           <p>In varius dapibus felis, placerat ultricies diam condimentum id. Phasellus lobortis purus tellus, at faucibus mauris varius vitae. Vestibulum vitae lectus lectus. Praesent ut diam vitae odio tincidunt porttitor sagittis sed ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer scelerisque scelerisque tincidunt. Curabitur et magna pulvinar, auctor est eget, semper nisl.</p>
        </div>
    </div>
    <div class="column">
        <div class="child">
            <p>Pellentesque et euismod mi. Nulla id ipsum convallis lacus eleifend vehicula quis id velit. In quis tempus sem, at vulputate nisi. Aenean sit amet tempor massa. Nunc et pulvinar mauris. Nunc pellentesque leo eget massa auctor tempor. Fusce nibh magna, iaculis at massa vel, consequat sagittis nisi.
        </div>
        <div class="child">
            <p>Curabitur nec placerat ligula, sed vehicula urna. Aliquam eget convallis lacus. Aenean et lacus eu ligula mollis ornare. Proin sit amet dolor eu dolor suscipit malesuada id sed urna. Integer quam ligula, semper ac elementum a, sollicitudin non turpis. Donec varius ullamcorper lacinia. Donec placerat rutrum nulla quis porta. Aenean auctor, lorem nec elementum semper, odio leo congue enim, lobortis molestie turpis dui quis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh ante, ornare ac sapien nec, aliquet sagittis diam. Proin id pellentesque ipsum. Aenean sollicitudin condimentum metus, quis pellentesque mauris vehicula vitae. In non venenatis nulla, eget consequat arcu.</p>
        </div>
    </div>
    <div class="column">
        <div class="child">
            <p>Etiam libero magna, imperdiet sit amet tincidunt eget, tristique a mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet purus id sagittis vulputate. Phasellus dignissim egestas augue aliquet venenatis. Duis condimentum massa odio, at congue purus suscipit eget. Ut sit amet neque eget felis pretium tempus. Fusce imperdiet, ipsum quis ultrices sagittis, lorem diam mollis nisi, eget tempus nisi eros at ligula. In hac habitasse platea dictumst. Nulla iaculis sed arcu hendrerit elementum. Aenean vel mi ut sapien posuere vulputate at ut tellus. Nunc convallis, justo et placerat dictum, libero eros scelerisque dolor, eu lacinia metus magna eu tellus.</p>
        </div>
        <div class="child">
            <p>Smaller one for testing</p>
        </div>
        <div class="child"></div>
        <div class="child">
            <p>other small one</p>
        </div>
        <div class="child">
            <p>Here is something that I wrote that is not horribly long but still ong enough so you get the picture I image</p>
        </div>
    </div>
</div>

将列的周围容器设置为

display:flex

，并将每个列设置为列flex。然后通过将列项目设置为

flex grow:1

，所有列都将占用整个列

---

如果您真的需要使用javascript执行此操作，您应该能够将此CSS添加到DOM元素。

嘿，您可以在JSFIDLE中发布HTML和CSS吗？我忘了提到我需要针对一些较旧的浏览器，如IE9，因此Flexbox不是一个真正的选项。

#outside {
    display: flex;
}
.column {
    display:flex;
    flex-direction: column;

}
.child {
    background-color: aqua;
    flex-grow: 1;
}