Question

我使用JS来计算包含各种大小的文本和图像的三列的高度。

这是我正在使用的JS：

maxHeight = 0;
$('.equalheight').each(function() {
  maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('.equalheight').css({ height: maxHeight + 'px' });

这适用于多个浏览器的桌面，但是，它不适用于某些移动设备。它适用于我的iPad Mini（最新iOS），但不适用于其他iPad 3或iPhone。它也不适用于我的三星Galaxy S4使用股票浏览器。

如何解决此问题？

Here is the site有问题。

Answer 1

这是@ Huangism建议inline-block的小提琴。您可以调整色谱柱高度进行实验。 http://jsfiddle.net/6WZrM/4/

如果容器div具有固定高度，则列将填充到该高度。我用js而不是列高度直接设置它。也许这种方法适用于您的问题设备。另外值得考虑的是，你var之前没有maxHeight，我想有可能某些设备对其范围的处理方式与其他设备不同？

//css
#column1, #column2{
  width: 50%;
  display: inline-block;
  height: 100%;
}

//js
var maxHeight = 0;
$('.equalheight').each(function() {
  maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('#container').css({ height: maxHeight + 'px' });

Answer 2

有一个jQuery插件用于这个目的：https://github.com/dubbs/equal-height

如果要使所有列的高度相同，请使用：

$('.equalheight').equalHeight();

如果你想按照他们的最高位置对它们进行分组，例如。在每个容器内：

$('.equalheight').equalHeight({ groupByTop: true });

使用JS的相等高度列 - 不适用于移动设备

2 个答案: