Javascript 调整JS大小后，Chrome无法正确计算柱高<；李>；多列元素<；部门>；

我正在创建一个仪表板，它应该将屏幕上的内容分为两列。 屏幕上的元素将是动态的，大小不同，每个元素的大小将随时间而变化。因此，我选择了多列div布局，这将很好地垂直填充列，并将内容均匀地分布在两列上

对于有很多行的表，我们的想法是将这些表放在一个固定高度的可滚动容器中。这样，所有元素仍将显示在屏幕上，只留下每个表的顶部X行可见

我将这些容器化的表放在li元素中，放在一个多列div中。然后我使用javascript计算前X行的高度，这些行不需要滚动就可以看到

到目前为止，一切顺利

这一切归结起来是什么：

CSS:

HTML:

....

JavaScript:

$(".scrollingTable").each(function() {
    var table = this;
    maxRows = 10;
    var wrapper = table.parentNode;
    var rowsInTable = table.rows.length;
    var height = 0;
    if (rowsInTable > maxRows) {
        for (var i = 0; i < maxRows; i++) {
            height += table.rows[i].clientHeight;
        }
        wrapper.style.height = height + "px";
    }
});

$（“.scrollingTable”）。每个（函数（）{
var表=此；
最大行数=10；
var wrapper=table.parentNode；
var rowsInTable=table.rows.length；
var高度=0；
如果（行列表>最大行）{
对于（变量i=0；i

JS Fiddle中的一个工作示例：

这个JSFIDLE在IE和Firefox中运行良好（显示两列）

但在chrome浏览器中，它只显示一个大列，下面有很多空白。

我认为是问题所在：

在计算锂元素在柱上的分布时，Chrome似乎不考虑新的容器高度。这是因为容器高度是由javascript函数更新的。第一列元素下方的空格说明了这一点

有趣的是，如果我用id=“divMultiColumn”从div中删除multiColumn类，然后使用“inspect element”函数手动重新应用该类，那么Chrome确实会像我预期的那样工作，它会像IE和Firefox一样将内容分发到这两列。 如果我使用JS来模拟删除和重新应用multiColumn类，那么这是行不通的（请参阅fiddle中注释掉的javascript位）

另外，如果我使用静态CSS设置表容器的height属性，chrome也可以正常工作

在使用JS动态改变列中元素的高度后，我无法理解为什么Chrome不重新计算内容在列中的分布方式。这是虫子吗

---

有人有解决办法吗？这似乎确实是一个chrome bug：

这里是我找到的解决方法，一个小JS脚本，它可以在延迟的情况下重置CSS类。如果不耽搁的话，它就不行了

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);

---

我发现添加最小高度就足以让Chrome正确渲染

.multiColumn {
  min-height: 'auto';
}

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);

.multiColumn {
  min-height: 'auto';
}