Question

所以我正在使用我在网上找到的一些jQuery。它有很多变化，它们都可以帮助你创建相同高度的div。当我加载页面时，我正在使用的代码就是这样。

    var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);

像魅力一样。

为了在调整浏览器窗口大小时使其工作，我重新使用上面相同的代码，但只是将它放在resize函数中：

    $(window).resize(function() {
var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);
});

这是挑战：我正在使用具有响应式布局的1140grid（http://cssgrid.net/）。它会在调整窗口大小时调整div的大小。所以我的div在宽度上缩小了，当窗口调整大小时，上面的第二组代码工作得很好。

我遇到的问题并且非常喜欢任何人的洞察力是如何在页面调整大小时破坏最小高度的值，然后再次运行该函数以从最高的div获得新的最小高度？问题是，一旦div变高，我将窗口调整为更宽，div需要降低高度，但它保持最高的div最小高度。这将允许我不断用新值更新div的最小高度，并重新计算最大div的实际高度。

Answer 1

取消设置最小高度，以便重新计算div的高度。

$('document').ready(function(){

    var $equal_height = $('.equal_height'),
        $col_a = $('.equal_height_div1');
        $col_b = $('.equal_height_div2');

    // calc the highest column
    // we assign this the return value of a function to make sure its always fresh.
    var heighest = function($col_a, $col_b){
        // Cache variables in closure
        var $col_a, $col_b;
        // this is where the magic happens
        return function(){    
            return Math.max( $col_a.height(), $col_b.height() );
        }
    }($col_a, $col_b);

    // Run once on ready to equalize columns
    $equal_height.css('minHeight', heighest);

    $(window).resize(function(){
       // By unsetting minHeight the column gets its real size back 
       $equal_height.css('minHeight', 0)
            .css('minHeight', heighest);
    });  

});

Answer 2

如果我理解你的话，如果缩放宽度，则需要删除min属性。也许将css设置为以下内容有帮助：

.css('min-height',  'none');

也许只是一种解决方法，但也许它有效。

jQuery：如何在页面加载时设置变量，在页面调整大小时销毁变量，然后加载新变量？

2 个答案: