Question

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

以下是四种颜色的样子，列表高度为90像素，边框周围有厚边框：

Firefox

上面的图片在以下来源的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：

Chrome

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

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

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

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

Answer 1

正如所承诺的，这是一个解决问题的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);
}

Answer 2

尝试删除<li>标记之间的所有结束内容。对于前者

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

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

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

2 个答案: