max-height
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
尝试一下
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 |
---|---|
适用元素 | 适用于所有元素,但不包括非替换行级元素、表格列和列组 |
是否是继承属性 | 否 |
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 |
动画类型 | a length, percentage or calc(); |
形式语法
max-height =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
示例
使用百分比和关键字值设置 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