Why Doesn't Percentage Height Work in CSS Like Percentage Width?

Percentage Height in CSS: Unlocking the Puzzle

One of the common conundrums encountered when using CSS is the discrepancy between percentage values for width and height. While percentage values for width work as expected, the same is not true for height.

Imagine you have two elements: #working and #not-working, each with a specified percentage value for width and height. The #working element behaves as anticipated: its width is 80% of the viewport. However, the #not-working element's height remains at 0, despite being set to 30%.

The Nature of Block Elements

To understand this conundrum, we need to delve into the nature of block elements in CSS. By default, block elements, such as

, determine their height based on their content. This means that their height expands to accommodate the size of the enclosed content.

The Parent-Child Relationship

When setting the height of a block element using a percentage value, we are referencing the element's parent container. In the #not-working element, the parent is the viewport, which has no specific height defined. As a result, there is an endless feedback loop between the parent and child, and the height cannot be accurately determined.

Breaking the Feedback Loop

To overcome this issue and allow for percentage height to function correctly, we must break the feedback loop by providing the parent element with a specific height. This provides a fixed reference point for calculating the percentage height of the child element.

In summary, percentage values for height in CSS require the parent element to have a defined height to prevent ambiguity and enable accurate calculations. Without a fixed parent height, the height of the child element remains 0.

The above is the detailed content of Why Doesn't Percentage Height Work in CSS Like Percentage Width?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn