Creating a balanced height for child elements using CSS

Question

Creating a balanced height for child elements using CSS

If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it:

The example shown above is rendered in Firefox 3.6.13 using the following source code:

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

While this works perfectly in Firefox, Safari or Chrome might introduce a small white gap between rows due to pixel rounding. This issue arises because non-integer pixel heights are not handled consistently across browsers.

To resolve this discrepancy, we need a flexible solution that adjusts based on varying content lengths. While setting precise pixel values manually could work in static scenarios, a dynamic solution is crucial for database-driven content.

One approach involves JavaScript calculations to ensure integer pixel row heights, which can be set onload. However, if you prefer a purely CSS-based solution, consider exploring alternative methods to address this rendering inconsistency. Do you have any ideas?

css webkit

Answer 1

Answer №1

Here is a Javascript solution to tackle the problem at hand, as promised. While I am still on the lookout for a simple CSS-based fix, this response could be beneficial for others looking to complete their task.

In order for the script to work seamlessly, two variables must be declared initially: list should reference the DOM element of the container (such as <ul>), and items should indicate the collection of items within this list (like <li>).

The approach involves dynamically assigning an explicit height in pixels to each item, ensuring that the total height matches the container's height while keeping deviations in height between items minimal. This is achieved by iterating over the items, calculating an integral height for each one by dividing the remaining available space by the number of items yet to have a definite 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 who prefer concise code over readability, here's a succinct version of the same script:

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

Answer 2

Here is a Javascript solution to tackle the problem at hand, as promised. While I am still on the lookout for a simple CSS-based fix, this response could be beneficial for others looking to complete their task.

In order for the script to work seamlessly, two variables must be declared initially: list should reference the DOM element of the container (such as <ul>), and items should indicate the collection of items within this list (like <li>).

The approach involves dynamically assigning an explicit height in pixels to each item, ensuring that the total height matches the container's height while keeping deviations in height between items minimal. This is achieved by iterating over the items, calculating an integral height for each one by dividing the remaining available space by the number of items yet to have a definite 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 who prefer concise code over readability, here's a succinct version of the same script:

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

Answer 3

Answer №2

Attempt to eliminate all line breaks between <li> elements. For example

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

Occasionally this issue arises, but I'm uncertain if it will resolve your current situation ;) Give it a shot ;)

Answer 4

Attempt to eliminate all line breaks between <li> elements. For example

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

Occasionally this issue arises, but I'm uncertain if it will resolve your current situation ;) Give it a shot ;)

Creating a balanced height for child elements using CSS

Answer №1

Answer №2

Similar questions

The full extent of the background color is not reaching 100% of the height

Next.js and Material UI - issues with dynamic styles not functioning

What is the best way to incorporate three divs into a single line while maintaining a responsive design

:after functionality not operating properly in Internet Explorer

Nodemailer is experiencing issues with displaying HTML content correctly

"Using CSS to align content in a table-row format on an HTML display

jquery asynchronous image loading technique

Clear all CSS styles applied to a targeted division

Necessary Quasar Select Dropdown Class

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

Define the total in a CSS attribute

flexbox with equal width and height

Images in CSS not copied to the output directory when using Webpack

Is there a way to determine whether my CSS style modifications will impact other web pages?

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

How can I create a webpage that is fully responsive to both width and height, with text that automatically scales to fit the

Placing a moveable object in a designated spot for dropping at the desired location

Extra space at the beginning and inside the body div containers

Issues with the functionality of Bootstrap

The collapsible toggle menu fails to collapse on mobile-sized screens