Evenly distributed height of child elements with CSS

Question

Assume you need to present a list of colors to the user. The colors must be displayed in a list with a fixed height, with each color occupying an equal fraction of that heig

Answer 1

As promised, here's a Javascript solution to the problem. I am still very interested in a simple CSS based solution, but in the meantime, this answer might help others getting their job done.

The script expects two variables to be declared at the point of entry: list should point to the DOM element of the container (eg <ul>), and items to the collection of items (eg <li>) in this list.

The idea is to dynamically set an explicit height in pixels on each item, in a way that ensures that the sum of the heights equals the height of the container, while allowing only minimal deviation of height between items. We do this by looping over the items, computing an integral height for each, by simply dividing the remaining available space with the number of items left to have an explicit height set.

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 those favoring conciseness over readability, here's a shorter version of the very same script:

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

Answer 2

Try to remove all endlines between <li> tags. For ex.

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

Sometimes this was a problem, but in your situation I'm not sure that will help ;) Just give a try ;)