最大高度 | max-height
max-height
该max-height CSS属性设置元素的最大高度。它可以防止height属性的使用值变得大于指定的值max-height。
/* <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;
max-height: fill-available;
/* Global values */
max-height: inherit;
max-height: initial;
max-height: unset;
max-height覆盖height，但min-height覆盖max-height。
| Initial value | none |
|---|---|
| 应用对象 | all elements but non-replaced inline elements, table columns, and column groups |
| 是否可继承 | no |
| 百分比值 | 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. |
| 媒体 | visual |
| 计算值 | the percentage as specified or the absolute length or none |
| 动画类型 | a length, percentage or calc( |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
<length>最大高度，表示为 <length>。<percentage>最大高度，以<percentage>包含块的高度表示。如果未明确指定包含块的高度，则将百分比值视为零。
关键字值
none高度没有最大值。
形式语法
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
实例
table { max-height: 75%; }
form { max-height: none; }
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'max-height' in that specification. | Working Draft | Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
| CSS TransitionsThe definition of 'max-height' in that specification. | Working Draft | Defines max-height as animatable. |
| CSS Level 2 (Revision 1)The definition of 'max-height' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 7.0 | 7.0 | 1.0 |
| applies to <table> 1 | No support | No support | (Yes) | No support | (Yes) | No support |
| max-content, min-content, and fit-content | No support 3 | No support | 3.0 (1.9)-moz 2 | No support | No support | 93 |
| fill-available | No support | No support | No support bug 527285 | No support | No support | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |
| applies to <table> 1 | ? | No support | ? | ? | ? | ? |
| max-content, min-content, and fit-content | ? | No support | ? | ? | ? | 93 |
| fill-available | ? | No support | ? | ? | ? | ? |
