max-height
CSS属性 max-height
设置元素的最大高度。它防止height
属性的使用值(used value)大于 max-height
的指定值。
尝试一下
max-height
会覆盖height
, 而min-height
会覆盖 max-height
.
Syntax
css
/* <length> value */
max-height: 3.5em;
/* <percentage> value */
max-height: 75%;
/* Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);
/* Global values */
max-height: inherit;
max-height: initial;
max-height: unset;
Values
<length>
-
Defines the
max-height
as an absolute value. <percentage>
-
Defines the
max-height
as a percentage of the containing block's height. auto
-
The browser will calculate and select a
max-height
for the specified element. none
-
No limit on the size of the box.
max-content
-
The intrinsic preferred
max-height
. min-content
-
The intrinsic minimum
max-height
. fit-content(
<length-percentage>
)-
Uses the
fit-content
formula with the available space replaced by the specified argument, i.e.min(max-content, max(min-content, argument))
.
Formal syntax
max-height =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
Examples
css
table {
max-height: 75%;
}
form {
max-height: none;
}
Accessibility concerns
Ensure that elements set with a max-height
are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
Specifications
Specification |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
CSS Box Sizing Module Level 4 # sizing-values |
初始值 | none |
---|---|
适用元素 | all elements but non-replaced inline elements, table columns, and column groups |
是否是继承属性 | 否 |
Percentages | The 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 type | a length, percentage or calc(); |
Browser compatibility
BCD tables only load in the browser