Равномерно распределенная высота дочерних элементов с помощью 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 пикселей - в пределах границ - и каждый цвет получает (на вид) равную долю этого пространства. Теперь давайте отрендерим тот же HTML / CSS в Safari или Chrome:

Обратите внимание на узкий белый ряд между зеленым рядом и границей. Существует довольно простое объяснение того, что мы видим здесь: 0.25 × 90 = 22.5

WebKit в Safari и Chrome не очень любит нецелые высоты пикселей и отбрасывает десятичную дробь. С четырьмя строками высотой 22 мы получаем 2 пикселя в нижней части списка: 90 - 4 × 22 = 2

В контексте статического HTML-файла мы могли бы легко установить высоту элементов равной 23, 22, 23, 23 пикселя соответственно, и список мог бы отображаться в любом браузере. Если, с другой стороны, цвета загружаются из базы данных, и количество зависит от каждого запроса, необходимо более гибкое решение.

Я знаю, как решить эту проблему, вычисляя и устанавливая высоту целочисленного значения в каждой строке onload, используя Javascript, и я опубликую это решение, если больше ничего не появится. Я, однако, предпочел бы чисто 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>

Иногда это было проблемой, но в вашей ситуации я не уверен, что это поможет;) Просто попробуйте;)