使用 CSS 均匀分布子元素的高度

Question

假设您需要向用户呈现颜色列表。颜色必须显示在具有固定高度的列表中，每种颜色占据该高度的相等部分。

这应该是四种颜色、90 像素的列表高度和粗边框的外观：

上图是在 Firefox 3.6.13 中渲染的，来源如下：

<ul style="height: 90px; border: 5px solid black; padding: 0;">
    <li style="height: 25%; background: red;">
    <li style="height: 25%; background: blue;">
    <li style="height: 25%; background: yellow;">
    <li style="height: 25%; background: green;">
</ul>

这一切都很好。该列表确实有 90 像素高——在边界内——并且每种颜色都获得了（看似）相等的空间份额。现在，让我们在 Safari 或 Chrome 中渲染相同的 HTML/CSS：

请注意绿色行和边框之间的白色窄行。对于我们在这里看到的内容有一个非常简单的解释：0.25 × 90 = 22.5

Safari 和 Chrome 中的 WebKit 并不真正喜欢非整数像素高度并丢弃小数点。使用高度为 22 的四行，我们在列表底部得到 2 个像素，即：90 - 4 × 22 = 2

在静态 HTML 文件的上下文中，我们可以轻松地将元素的高度分别设置为 23、22、23、23 像素，并且列表可以在任何浏览器中正常显示。另一方面，如果颜色是从数据库加载的，并且计数随每个请求而变化，则需要更灵活的解决方案。

我知道如何通过使用 Javascript 在每行 onload 上计算和设置整数值高度来解决这个问题，如果没有其他问题出现，我将发布此解决方案。但是，我更喜欢纯基于 CSS 的解决方案。你能想到一个吗？

Answer 1

尝试删除<li> 标记之间的所有结束线。 例如。

<ul><li></li><li></li></ul>

有时这是一个问题，但在您的情况下，我不确定这是否会有所帮助；） 试一试;)

Answer 2

正如所承诺的，这里有一个 Javascript 解决方案。我仍然对基于 CSS 的简单解决方案非常感兴趣，但与此同时，这个答案可能会帮助其他人完成工作。

脚本需要在入口点声明两个变量：list 应该指向容器的 DOM 元素（例如<ul>），items 指向项目的集合（例如<li> ) 在此列表中。

这个想法是在每个项目上动态设置一个明确的高度（以像素为单位），以确保高度的总和等于容器的高度，同时只允许项目之间的高度偏差最小。我们通过遍历项目来实现这一点，计算每个项目的整数高度，只需将剩余的可用空间除以剩余的项目数即可明确设置高度。

var spaceRemaining = list.clientHeight;
var itemsRemaining = items.length;

while (itemsRemaining > 0) {
    var itemHeight = Math.round(spaceRemaining / itemsRemaining);
    items[itemsRemaining - 1].style.height = itemHeight;
    spaceRemaining -= itemHeight;
    itemsRemaining -= 1;
}

对于那些更喜欢简洁而不是可读性的人，这里是相同脚本的更短版本：

for (var space = list.clientHeight, i = items.length; i; i--) {
    space -= items[i-1].style.height = Math.round(space / i);
}