当百分比填充定义元素高度时，忽略max-height [英] max-height ignored when percentage padding defines element height

问题描述

当内部填充大于max-height值时， max-height 属性值似乎被忽略.例如，在元素上设置此类会导致max-height被忽略.

The max-height property value seems to be ignored when the inner padding is greater than the max-height value. For example, setting this class on an element causes the max-height to be ignored.

.max-height-ignored {
    height: 0; /* or auto, makes no difference */
    max-height: 40px;
    padding: 0 0 50% 50%;
}

在此处演示

在我的情况下，包装该元素以防止溢出很痛苦，并且只是想知道背后是否有原因不起作用.

In my situation, It would be a pain to wrap the element to prevent overflow and was just wondering if there was a reason behind this not working.

推荐答案

min/max width/height属性从不考虑其他任何框的尺寸，无论是边框还是填充.它们仅分别约束 width 和 height 属性的使用值. CSS2.1的第10节没有在散文中明确提及边框或填充最小/最大属性，但确实引用了 width 和 height 属性，这两个属性均涉及内容尺寸.

The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.

如果您设置 height:50px ，则该元素仍将被限制为40px的内容高度.然后，填充将从内容区域扩展.

If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.

不幸的是，它似乎没有显示 box-sizing:border-box 不能完全解决这个问题，至少当边框和/或填充物的宽度和高度超过宽度时不会如此.

Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.

虽然我可以推断这是由于浏览器遵循规范而发生的，但为何规范是用 编写的，所以我不能客观地回答.鉴于填充和溢出修剪可以一起使用，我认为这种行为的原因与溢出无关.

While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.

这篇关于当百分比填充定义元素高度时，忽略max-height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！