9.2.4 列的填充方式

在多列容器中，如果显式设置了容器的高度，往往会由于内容不足，而导致最后面的列没有内容填充，就会出现各列高度不一致的情况。

这种情况下，就可以通过 column-fill属性来控制各列内容的填充方式，可选值为 auto | balance。balance 表示各列的内容均衡填充，auto 表示各列的内容自动填充。

由于多列布局还没有成为正式标准，各浏览器的默认填充方式也没有得到统一。Firefox 浏览器默认是均衡填充，而其他浏览器默认是自动填充。假设为上述容器显式设置高度：

div {
    height: 140px;
}

在Firefox 浏览器中的运行结果如图 9‑9 所示：

从上图可以看出，当 column-fill属性取值 balance时，每一列所填充的内容量相等，其结果是所有列的高度相等，但不会超过容器的高度。这种情况下，当内容不能填满整个容器时，空白区域分布在容器的底部。

目前为止，column-fill属性仅得到 Firefox 浏览器的支持，并且需要添加浏览器私有前缀。如果希望 Firefox与其他浏览器的表现相同，即自动填充，则需要将 column-fill属性显式设置为 auto：

div {
    …
    -moz-column-fill: auto;
}

此时，在Firefox 及其他浏览器中的运行结果相同。如图 9‑10 所示：

从上图可以看出，当 column-fill属性取值 auto 时，浏览器会按容器的高度自动填充每列的内容，先填充第1列，再填充第2列，依次类推，直到内容全部填充完成。自动填充时，当内容不能填满整个容器时，空白区域分布在最后一列的末尾。