Tidadigi Logo

CSS max-height Property

Thuộc tính max-height trong CSS được dùng để thiết lập chiều cao tối đa của một phần tử. Nếu nội dung lớn hơn max-height, nội dung sẽ tràn. Ngược lại, thuộc tính này không có hiệu lực. Nếu nội dung nhỏ hơn, thuộc tính này cũng không ảnh hưởng. Giá trị của thuộc tính height có thể bị ghi đè bởi max-height.

Cú pháp:

max-height: none|length|initial|inherit;

Giá trị thuộc tính:

  • none: Đây là giá trị mặc định và không chứa max-height. Nó tương đương với việc không chỉ định chiều cao tối đa.
  • length: Thuộc tính này dùng để định nghĩa max-height bằng đơn vị độ dài. Độ dài có thể được thiết lập bằng px, em, v.v.
  • initial: Thuộc tính này được sử dụng để đặt giá trị của max_height về mặc định.
  • inherit: Thuộc tính này được kế thừa từ phần tử cha của nó.

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính max-height: none.

html 
<!DOCTYPE html>
<html>
<head>
    <title>max-height property</title>

    <style>
        p {
            max-height: none;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>

<body>
    <p>
        Prepare for the Recruitment drive of
        product based companies like Microsoft,
        Amazon, Adobe etc with a free online
        placement preparation course. The course
        focuses on various MCQ's & Coding question
        likely to be asked in the interviews & make
        your upcoming placement season efficient
        and successful.
    </p>
</body>
</html>

Output: css-max-height-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính max-height: length.

html 
<!DOCTYPE html>
<html>
<head>
    <title>max-height property</title>

    <style>
        p {
            max-height: 35px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>

<body>
    <p>
        Prepare for the Recruitment drive of
        product based companies like Microsoft,
        Amazon, Adobe etc with a free online
        placement preparation course. The course
        focuses on various MCQ's & Coding question
        likely to be asked in the interviews & make
        your upcoming placement season efficient
        and successful.
    </p>
</body>
</html>

Output: css-max-height-property

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính max-height: initial.

html 
<!DOCTYPE html>
<html>
<head>
    <title>max-height property</title>

    <style>
        p {
            max-height: initial;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>

<body>
    <p>
        Prepare for the Recruitment drive of
        product based companies like Microsoft,
        Amazon, Adobe etc with a free online
        placement preparation course. The course
        focuses on various MCQ's & Coding question
        likely to be asked in the interviews & make
        your upcoming placement season efficient
        and successful.
    </p>
</body>
</html>

Output: css-max-height-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính max-height được liệt kê dưới đây:

  • Google Chrome 18.0
  • Edge 12.0
  • Internet Explorer 7.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.3

Last Updated : 21/07/2025