Why Do Chrome and Firefox Render Block Element Heights Differently?

Heights Rendering Differently in Chrome and Firefox

When setting the height of a block-level element to auto or 0~100% without explicitly specifying the parent's height property, its calculated height in Chrome can differ from Firefox, particularly when the element has bottom margin.

Why the Difference?

The W3C CSS2.1 specification states that height: 1% should compute to auto if the containing block's height is not specified explicitly. However, Chrome adheres to a more traditional interpretation, requiring a set height property on the parent for percentage heights to work on child elements.

Firefox and IE, on the other hand, have recently broadened their interpretation to accept flex heights as reference for percentage heights. This deviation from the traditional interpretation has led to rendering differences in browsers.

Alternative Solutions

To achieve the desired behavior in both Chrome and Firefox, consider these alternatives:

• Apply display: flex to the parent, which sets align-items: stretch and forces the child to expand to the parent's full height.
• Use position: relative on the parent and position: absolute; height: 100%; width: 100% on the child. This method overrides the percentage height issue in Chrome.

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