max-height

CSS 属性 max-height 设置元素的最大高度。它防止 height 属性的应用值大于 max-height 指定的值。

尝试一下

max-height 会覆盖 height,而 min-height 会覆盖 max-height

语法

css
/* <length> 值 */
max-height: 3.5em;

/* <percentage> 值 */
max-height: 75%;

/* 关键字值 */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fit-content(20em);

/* 全局值 */
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: revert-layer;
max-height: unset;

<length>

定义作为绝对值的 max-height

<percentage>

定义作为包含区块高度百分比的 max-height

none

盒子大小没有限制。

max-content

固有的首选 max-height

min-content

固有的最小 max-height

fit-content(<length-percentage>) 实验性

使用 fit-content 公式,用指定参数替换可用空间,即 min(max-content, max(min-content, argument))

无障碍考虑

确保设置了 max-height 的元素在页面缩放以增大文字大小时不会被截断和/或遮挡其他内容。

形式定义

初始值none
适用元素all elements but non-replaced inline elements, table columns, and column groups
是否是继承属性
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
计算值the percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

形式语法

max-height = 
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )

<length-percentage> =
<length> |
<percentage>

示例

使用百分比和关键字值设置 max-height

css
table {
  max-height: 75%;
}

form {
  max-height: none;
}

规范

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

浏览器兼容性

BCD tables only load in the browser

参见