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

{{InteractiveExample("CSS Demo: max-height")}}

```css interactive-example-choice max-height: 150px;


```css interactive-example-choice
max-height: 7em;

```css interactive-example-choice max-height: 75%;


```css interactive-example-choice
max-height: 10px;

```html interactive-example

This is a box where you can change the maximum height.
This will limit how tall the box can be, potentially causing an overflow. 


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

max-height 会覆盖 {{cssxref("height")}}，而 {{cssxref("min-height")}} 会覆盖 max-height。

语法

/* <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;

值

  • {{cssxref("<length>")}}
    • : 定义作为绝对值的 max-height。
  • {{cssxref("<percentage>")}}
    • : 定义作为包含区块高度百分比的 max-height。
  • none
    • : 盒子大小没有限制。
  • max-content
    • : 固有的首选 max-height。
  • min-content
    • : 固有的最小 max-height。
  • fit-content({{cssxref("&lt;length-percentage&gt;")}}) {{Experimental_Inline}}
    • : 使用 fit-content 公式，用指定参数替换可用空间，即 min(max-content, max(min-content, argument))。

无障碍考虑

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

形式定义

{{cssinfo}}

形式语法

{{csssyntax}}

示例

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

table {
  max-height: 75%;
}

form {
  max-height: none;
}