max-height

Try it

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: white;
}

max-height ghi đè height, nhưng min-height ghi đè max-height.

Cú pháp

/* Giá trị <length> */
max-height: 3.5em;
max-height: anchor-size(height);
max-height: calc(anchor-size(--my-anchor self-block, 250px) + 2em);

/* Giá trị <percentage> */
max-height: 75%;

/* Giá trị từ khóa */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fit-content(20em);
max-height: stretch;

/* Giá trị toàn cục */
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: revert-layer;
max-height: unset;

Giá trị

<length>

Xác định max-height là một giá trị tuyệt đối.

<percentage>

Xác định max-height là một tỷ lệ phần trăm theo chiều cao của khối chứa.

none

Không giới hạn kích thước của hộp.

max-content

max-height ưu tiên nội tại.

min-content

max-height tối thiểu nội tại.

fit-content

Sử dụng không gian có sẵn, nhưng không vượt quá max-content, tức là min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Sử dụng công thức fit-content với không gian có sẵn được thay thế bằng đối số được chỉ định, tức là min(max-content, max(min-content, argument)).

stretch

Giới hạn chiều cao tối đa của margin box của phần tử bằng chiều cao của khối chứa. Nó cố gắng làm cho margin box lấp đầy không gian có sẵn trong khối chứa, tương tự như 100% nhưng áp dụng kích thước kết quả cho margin box thay vì hộp được xác định bởi box-sizing.

Note: Để kiểm tra các bí danh được sử dụng bởi trình duyệt cho giá trị stretch và trạng thái triển khai của nó, hãy xem phần Tương thích trình duyệt.

Khả năng tiếp cận

Đảm bảo rằng các phần tử được đặt max-height không bị cắt bớt và/hoặc không che khuất nội dung khác khi trang được thu phóng để tăng kích thước chữ.

• MDN Tìm hiểu WCAG, Giải thích Hướng dẫn 1.4
• Tìm hiểu Tiêu chí Thành công 1.4.4 | W3C Tìm hiểu WCAG 2.0

Định nghĩa hình thức

Cú pháp hình thức

max-height = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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> = 
  <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        

Ví dụ

Đặt max-height bằng giá trị phần trăm và từ khóa

table {
  max-height: 75%;
}

form {
  max-height: none;
}

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• min-height
• height
• max-inline-size
• max-block-size
• box-sizing
• Hướng dẫn Giới thiệu mô hình hộp CSS
• Mô-đun Mô hình hộp CSS