font - Altura distribuida uniformemente de elementos secundarios con CSS

text color css

Question

Supongamos que necesita presentar una lista de colores al usuario. Los colores deben mostrarse en una lista con una altura fija, y cada color ocupa una fracción igual de esa altura.

Este es el aspecto que debe tener con cuatro colores, una altura de lista de 90 píxeles y un borde grueso alrededor:

La imagen de arriba se representa en Firefox 3.6.13 de la siguiente fuente:

<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>

Todo esto está bien. De hecho, la lista tiene 90 píxeles de altura, dentro de los bordes, y cada color recibe una parte (aparentemente) igual de este espacio. Ahora, vamos a renderizar el mismo HTML / CSS en Safari o Chrome:

Observe la fila blanca estrecha entre la fila verde y el borde. Hay una explicación bastante simple para lo que estamos viendo aquí: 0.25 × 90 = 22.5

WebKit en Safari y Chrome realmente no le gustan las alturas de píxeles no enteros y deja caer el decimal. Con cuatro filas de altura 22 obtenemos 2 píxeles de nada en la parte inferior de la lista: 90 - 4 × 22 = 2

En el contexto de un archivo HTML estático, podríamos establecer fácilmente la altura de los elementos en 23, 22, 23, 23 píxeles respectivamente, y la lista se mostraría bien en cualquier navegador. Si, por otro lado, los colores se cargan desde una base de datos y el conteo varía con cada solicitud, se necesita una solución más flexible.

Sé cómo resolver esto calculando y estableciendo una altura de valor entero en cada fila de onload usando Javascript, y publicaré esta solución si no aparece nada más. Sin embargo, preferiría una solución puramente basada en CSS para el problema. Puedes pensar en una?

Answer 1

Como se prometió, aquí hay una solución de Javascript para el problema. Todavía estoy muy interesado en una solución simple basada en CSS, pero mientras tanto, esta respuesta podría ayudar a otros a hacer su trabajo.

El script espera que se declaren dos variables en el punto de entrada: la list debe apuntar al elemento DOM del contenedor (por ejemplo, <ul> ), y los items a la colección de elementos (por ejemplo, <li> ) en esta lista.

La idea es establecer dinámicamente una altura explícita en píxeles en cada elemento, de manera que se asegure de que la suma de las alturas sea igual a la altura del contenedor, al tiempo que permite solo una desviación mínima de la altura entre los elementos. Hacemos esto en bucle sobre los elementos, calculando una altura integral para cada uno, simplemente dividiendo el espacio disponible restante con el número de elementos que quedan para tener una altura explícita establecida.

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;
}

Para aquellos que favorecen la concisión sobre la legibilidad, aquí hay una versión más corta del mismo script:

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

Answer 2

Intente eliminar todas las líneas finales entre etiquetas <li> . Por ej.

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

A veces esto fue un problema, pero en su situación no estoy seguro de que eso ayude;) Solo inténtelo;)