Why Do Chrome and Firefox Render Heights Differently for Percentage and 'Auto' Values?

Heights Rendering Differently in Chrome and Firefox

In CSS, setting the height of a block-level element to a percentage or "auto" without specifying the parent element's height can lead to varying height calculations across browsers. Chrome and Firefox, for instance, exhibit different behaviors.

Why "height: 1%" Calculates to Auto

In your example with height: 1%, Chrome computes the height of the div as the margin-bottom plus the content height of the p element. This is because, according to the CSS spec, when the parent's height is not explicitly set and the element is not absolutely positioned, "auto" is computed for percentages.

Parent's Flex Height

Another discrepancy between Chrome and Firefox is their handling of percentage heights in flexbox. Chrome and Safari prioritize the parent's flex height, while Firefox and IE11/Edge prioritize the parent's overall height.

Browser Interpretation

The CSS spec's language regarding height percentages is somewhat vague, leaving room for interpretation by browser makers. Traditional interpretations require a set height value on the parent, which is followed by browsers like Chrome and Safari. However, Firefox and IE have expanded this interpretation to include flex heights.

Alternative Solutions

To ensure consistent height rendering across browsers, consider these alternatives:

• Use display: flex on the parent and align-items: stretch on the child to set the child's height to the full parent height.
• Apply position: absolute with height: 100% and width: 100% on the child while setting position: relative on the parent.

The above is the detailed content of Why Do Chrome and Firefox Render Heights Differently for Percentage and 'Auto' Values?. For more information, please follow other related articles on the PHP Chinese website!