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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
