0

我目前正在研究响应式设计，并且在三列中有一些内容框。我希望所有内容框的高度相同。所以，我做了一些谷歌搜索并找到了几个 jQuery 解决方案。

我终于确定了类似的东西：

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

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

这很好用，除了一个问题。

当您调整窗口大小时，列会变得更宽/更窄，因此文本会自行重新分页。

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

我发现了与窗口调整大小和文本问题类似的问题。

有没有人想出解决方案？

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

感谢您的任何想法！

标记

4

1 回答 1

0

好吧，我实际上终于弄清楚了我需要什么。

最终代码如下所示：

// 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", ""); 线。

没有那个功能只是一遍又一遍地使用相同的高度，这使它看起来好像不起作用。

现在，当调整窗口大小并且文本重新分页时，这会成功“连续”触发。

于 2013-06-10T21:33:51.763 回答