Tidadigi Logo

Tailwind CSS Min-Height

Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính đều được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho CSS Min-Height Property. Class này dùng để thiết lập chiều cao tối thiểu của một phần tử. Khi nội dung nhỏ hơn min-height, class min-height sẽ có tác dụng. Nếu nội dung lớn hơn min-height, nó sẽ không ảnh hưởng. Class này đảm bảo giá trị của class height không nhỏ hơn giá trị min-height được chỉ định.

Các class Min-Height:

  • min-h-0
  • min-h-full
  • min-h-screen

min-h-0: Class này được dùng để thiết lập chiều cao tối thiểu cụ thể cho bất kỳ phần tử nào.

Cú pháp:

<element class="min-h-0">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Min-Height Class</b> 
    <div class="mx-48 bg-green-200 p-8">
        <div class="min-h-0 bg-green-400 
                    rounded-lg">min-h-0</div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-min-height

min-h-full: Class này dùng để đặt chiều cao tối thiểu là full, phụ thuộc phần tử cha.

Cú pháp:

<element class="min-h-full">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Min-Height Class</b> 
    <div class="mx-48 h-48 bg-green-200 p-8">
        <div class="min-h-full bg-green-400 
                    rounded-lg">
          	min-h-full
        </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-min-height

min-h-screen: Class này dùng để làm cho phần tử trải dài toàn bộ chiều cao khung nhìn tối thiểu.

Cú pháp:

<element class="min-h-screen">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Min-Height Class</b> 
    <div class="mx-48 bg-green-200 p-8">
        <div class="min-h-screen bg-green-400 
                    rounded-lg">min-h-screen</div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-min-height
Last Updated : 20/07/2025