Question

我目前正在开发响应式设计，并在三列中包含一些内容框。我希望所有内容框都具有相同的高度。所以，我做了一些Google，并找到了几个jQuery解决方案。

我终于找到了类似的东西：

$(".equal-height").each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
});

$(".equal-height").height(maxHeight);

除了一个问题外，这很有效。

当您调整窗口大小时，列可以变得更宽/更瘦，因此文本会重新组合。

在窗口调整大小期间，JavaScript似乎无法计算重新分页文本的高度。

我发现窗口大小调整和文本问题存在类似问题。

有没有人为此找到解决方案？

我无法相信具有相同高度列的响应式设计是如此困难。

感谢您的任何想法！

标记

Answer 1

好的，我终于找到了我需要的东西。

最终代码如下所示：

// Reset max height for each class
var intMaxHeight = 0;

// We MUST remove all heights from the various DIV elements
// NOTE: If we don't do this then the height will stay the same no matter what 
// after the first call - it will just stay the same as the first intMaxHeight
$(".content-box-content").each(function() {
    $(this).css("height", "");
}); 

// Set the max height of the tallest column
$(".content-box-content").each(function() {
    if (intMaxHeight < $(this).height()) {
        intMaxHeight = $(this).height();
    } else {
        intMaxHeight = intMaxHeight;
    }
});

// Set all columns to the height of the tallest column
$(".content-box-content").each(function() {
    $(this).css("height", intMaxHeight + "px");
});

关键是设置 $（this）.css（“height”，“”）; 行。

没有它，这个功能一次又一次地保持使用相同的高度，这使它看起来似乎无法正常工作。

现在，当窗口调整大小并且文本自我重生时，这会成功“连续”激活。

jQuery使列高度相同 - 字体/文本更改后

1 个答案: