javascript - Scale divs to equal height, max-height needed

Question

I'm in the process of building a responsive calendar for a site I'm working on. The calendar scales down fine using the following javascript to keep the divs set to the same height.

    $(function(){
    var equalHeight = function() {
        $(".calBody").each(function(){
            var maxHeight = 0;
            $(this).children(".calBlock")
                .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
                .css('min-height',maxHeight);
        });
    }

    equalHeight();

    $(window).resize(function(){equalHeight()});
});

This keeps the columns nice and even from the start and as it gets scaled down, however when you start scaling back up it keeps the max height of the divs from when they were at their tallest.

Any ideas on getting them to scale to be only as tall as whats needed for the tallest div scaling both up and down?

Here is a jsfiddle of it in action: jsfiddle.net/7n4VH/1

Answer 1

尝试获取 .calBlock 的孩子的 .height() 。就像是：

.each(function() { maxHeight = Math.max(maxHeight, $(this).children('.events:first').height()); })
.css('min-height',maxHeight+30);