Why Do Chrome and Firefox Differ in Calculating Heights for Block-Level Elements with Percentage Heights?

Rendering Differences in Chrome and Firefox for Heights

Issue

Setting a block-level element's height to "auto" or "0~100%" without explicitly specifying the parent's height results in different height calculations in Chrome and Firefox. In the case of "height: 1%," Chrome calculates the height as the bottom margin plus content height, while Firefox does not. This behavior differs despite the CSS specification stating that "height: 1%" should be computed as "auto" when the parent's height is not explicitly set.

Cause

While the W3C provides standards for browsers, browser makers have the freedom to implement these standards differently. In this case, Chrome and Firefox interpret the "height" property differently.

Chrome follows a more traditional interpretation of the spec, requiring a set height on the parent for percentage heights to work on child elements. Firefox and IE have more recently broadened their interpretation to accept flex heights as well.

Alternative Solutions

To address this inconsistency, consider using one of these alternatives:

• Display Flex: Set "display: flex" on the parent, which automatically sets "align-items: stretch" and expands the child to the full height of the parent.
• Absolute Positioning: Set "position: relative" on the parent and "position: absolute; height: 100%; width: 100%" on the child. This allows a percentage height to be used without a specified height on the parent.

The above is the detailed content of Why Do Chrome and Firefox Differ in Calculating Heights for Block-Level Elements with Percentage Heights?. For more information, please follow other related articles on the PHP Chinese website!