Question

我有两个相邻div“列”的问题。这是一个常见的用例，其中一个可能比另一个高得多，这可能是一个可用性问题，因为用户将项目从一个div拖放到另一个div。

使用jQuery，我想确保这两列总是相等的高度。不仅仅是页面加载，而且如果它们的内部内容发生变化，或者它们是用jQuery动画或者页面调整大小或任何其他可能的原因，更高的div的高度发生变化，另一个将跟随。

实现这一目标的最快处理方式是什么？（我希望在窗口大小调整时重绘的延迟最小）

提前多多感谢！

Answer 1

您可以绑定到所有匹配div上的resize事件，然后在回调中将其高度设置为彼此。这是下面的fiddle：

$(document).on("resize", ".selector", function() {
    var max = function(array){ return Math.max.apply(Math, array); }
    var heights = $(".selector").map(function() { return $(this).height() }).get();
    $(".selector").height(max(heights));
});

上面的处理程序包含3个步骤：

创建一个函数以从任何数组中获取最大值
查找所有高度并将它们放入数组中
最后将每个元素的高度设置为最大值。

Answer 2

<div class="same_height_kids"><div>foo></div><div>bar</div></div>

$('.same_height_kids').bind('DOMSubtreeModified change', function(e){
  var min = 0;
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: 0});
    if($(e).height() > min){
      min = $(e).height();
    }
  });
  $(e.currentTarget).css({minHeight: min});
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: min});  
  });
});

这不是经过测试的代码。如果IE早于9，也不支持Opera，则不支持DOMSubtreeModified事件。尽管我知道onChange事件在某些浏览器中有效。 onResize通常只在窗口和框架上。

这个实现有一个缺陷，即div不能变小。为此，你必须在计算新高度之前删除最小高度。

编辑：更新的代码。 http://jsfiddle.net/ADY3F/5/

上的示例

Answer 3

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                setInterval(checkSizes, 1000);
            });

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


            function checkSizes(){
                if($("#myDiv1").height() != $("#myDiv2").height()){
                    console.log("Sizes do not match");
                    alert("Sizes do not match");
                }
            }
    </script>
</head>
<body>
    <div id="myDiv1">
        test
    </div>
    <div id="myDiv2">
        test<br />
        test
    </div>
</body>
</html>

此示例每秒检查一次，并在每次调整窗口大小时进行检查。如果他们不匹配。它会在消息框和控制台中提醒您。

使用css，您还可以设置div的最大高度。它会削减任何多余的东西。

max-height:50px;

Answer 4

如果您不需要支持早于v8的IE，那么CSS可以display:table-cell为您完成。

确保元素高度相等

4 个答案: