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

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

这是四种颜色应该是什么样子，一个高达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的解决方案来解决问题。你能想到一个吗？

解决方法

如所承诺的，这是一个JavaScript解决方案的问题。我对一个简单的基于CSS的解决方案仍然很感兴趣，但在此期间，这个答案可能有助于其他人完成工作。

该脚本期望在条目点处声明两个变量：list应指向容器的DOM元素(例如< ul>)，以及此列表中项目集合(例如< 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);
}