min-height

Try it

min-height: 150px;

min-height: 7em;

min-height: 75%;

min-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 minimum height. <br />If there is
    more content than the minimum the box will grow to the height needed by the
    content.
  </div>
</section>

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

Chiều cao của phần tử được đặt thành giá trị min-height bất cứ khi nào min-height lớn hơn max-height hoặc height.

Cú pháp

/* Giá trị <length> */
min-height: 3.5em;
min-height: anchor-size(height);
min-height: anchor-size(--my-anchor block, 200px);

/* Giá trị <percentage> */
min-height: 10%;

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

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

Giá trị

<length>

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

<percentage>

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

auto

Trình duyệt sẽ tính toán và chọn min-height cho phần tử được chỉ định.

max-content

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

min-content

min-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 thiểu 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.

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

Cú pháp hình thức

min-height = 
  auto                                      |
  <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 min-height

table {
  min-height: 75%;
}

form {
  min-height: 0;
}

Đặc tả kỹ thuật

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

Xem thêm

• max-height
• height
• min-inline-size
• min-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