2

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

对于有很多行的表，想法是将这些表放在一个固定高度的可滚动容器中。这样，所有元素仍将适合屏幕，只留下每个表格的前 X 行可见。

我将这些容器化表格放在 li 元素中，在一个多列 div 中。然后我使用 javascript 来计算前 X 行的高度，这些行应该在不滚动的情况下可见。

到目前为止，一切都很好。

这一切归结为：

CSS：

div.multiColumn {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
ul.noBullets {
    list-style: none; 
    padding: 0;
    margin: 0 0.5rem 0 0.5rem;
    display: -webkit-box;
    display: box;

}
ul.noBullets > li {
    display: inline-block;
    width: 100%;
}
.scrollingTableDiv {
    overflow-y: auto;
}

HTML：

<div class="multiColumn">
  <ul class="noBullets" id="ulMultiColumn">
    <li>
      <div class="scrollingTableDiv"> <!-- this is the container -->
      <table class="scrollingTable" id="list1">
      ....
      </table>
    </li>
  </ul>
</div>

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";
    }
});

JS Fiddle 中的一个工作示例：

http://jsfiddle.net/m63LL112/4/

这个 jsfiddle 在 IE 和 Firefox 中可以正常工作（应该显示两列）。

但在 chrome 中，它只显示 1 个大列，其下方有很多空白。

.

我认为的问题是：

在计算 li 元素应如何分布在列上时，Chrome 似乎不尊重新的容器高度。那是因为容器高度是由 javascript 函数更新的。第一列元素下方的空格说明了这一点。

有趣的是，如果我从 id="divMultiColumn" 的 div 中删除 multiColumn 类，然后使用“inspect element”功能手动重新应用该类，那么 Chrome 会按我的预期工作，它会将内容分布在两列，就像 IE 和 Firefox 一样。如果我使用 JS 来模拟 multiColumn 类的删除和重新应用，那么这不起作用（请参阅小提琴中注释掉的 javascript 位）。

此外，如果我使用静态 CSS 设置表格容器的高度属性，则 chrome 可以正常工作。

我无法弄清楚为什么 Chrome 在使用 JS 动态更改列中元素的高度后没有重新计算内容应如何分布在列上。这是一个错误吗？

有人有解决方法的想法吗？

4

2 回答 2

0

This indeed seems to be a chrome bug: https://code.google.com/p/chromium/issues/detail?id=297782

Here's the workaround I found, a little JS script which resets the CSS class, with a delay. Without the delay it won't work.

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);
于 2014-11-16T20:32:52.763 回答
0

我发现添加 min-height 足以欺骗 Chrome 正确渲染。

.multiColumn {
  min-height: 'auto';
}
于 2015-08-06T05:58:37.950 回答