等高列表项

Question

I have a challenge with setting equal heights on some list items on my site. It works "most" of the time however occasionally it returns the wrong height and there are collisions in content. The intent is for a button and some text to be positioned absolute to the bottom to align with other list items horizontally. I'm using jQuery and here is my code:

    setGridItemsEqualHeight();
    function setGridItemsEqualHeight() {
        var $object = jQuery(".grid-style").find('.actions');
        if ($object) {
            var max = 0;
                jQuery(".item-area").each(function(){
                    var h = jQuery(this).height();
                    max = Math.max(max, h);
            });

        jQuery(".item-area").css({ height: max});
        jQuery(".item .details-area .actions").attr("style", "position: absolute; bottom: 0px; left: 50%; margin-right: -50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%)"); 
        }
    }

And here is the HTML:

<li class="item">
  <div class="item-area grid-area">
    <p>Some content here that sits above</p>
    <div class="actions grid">Bottom aligned content positioned content here </div>
  </div>
</li>

Any ideas, suggestions? Thanks.

Answer 1

I have the following function:

$.fn.equalizeHeights = function () {
    return this.height(Math.max.apply(this, $(this).map(function (i, e) { return $(e).height() }).get()))
}

Html:

<div class="parentDiv">
   <div class="item sameHeight" id="item1">
   </div>
   <div class="item sameHeight" id="item2">
   </div>
</div>

Call:

$(".sameHeight").equalizeHeights();

JSFiddle Example