Thuộc tính max-height trong CSS

Thuộc tính max-height thiết lập chiều cao tối đa cho thành phần.

Cấu trúc

tag {
    max-height: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
max-height	đơn vị	max-height: 50px;	Chiều cao tối đa tính từ mép trên cùng của thành phần, đơn vị có thể là px, em, %, ...
	none	max-height: none;	Không sử dụng chiều cao lớn nhất, đây là dạng mặc định.
	inherit	max-height: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<div>
<ul>
<li><a href="html4-xhtml.php">Tham khảo html4</a></li>
<li><a href="html5/">Tham khảo html5</a></li>
<li><a href="cssSection/">Tham khảo css2</a></li>
<li><a href="cssSection/">Tham khảo css3</a></li>
<li><a href="tag/">Tham khảo jquery</a></li>
</ul>
</div>
</body>
</html>

Giả sử ban đầu CSS viết:

div {
    border: 1px solid red;
}

Hiển thị trình duyệt khi chưa có thuộc tính max-height:

Thêm thuộc tính max-height vào CSS:

div {
    border: 1px solid red;
    max-height: 60px;
}

Hiển thị trình duyệt khi đã thêm max-height vào CSS:

Khi đã sử dụng thuộc tính max-height thì chiều cao của box sẽ không vượt quá giá trị của max-height

Trình duyệt hỗ trợ

Thuộc tính max-height được hỗ trợ trong đa số các trình duyệt, ngoại trừ IE6. Giá trị "inherit" trình duyệt IE8 đòi hỏi phải có !Doctype

Thuộc tính max-height trong CSS