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.

* Some parts of this feature may have varying levels of support.

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

尝试一下

max-height: 150px;

max-height: 7em;

max-height: 75%;

max-height: 10px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the maximum height. <br />This will limit
    how tall the box can be, potentially causing an overflow.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

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
适用元素适用于所有元素，但不包括非替换行级元素、表格列和列组
是否是继承属性否
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
动画类型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

浏览器兼容性

参见