Thuộc tính max-height

Định nghĩa và sử dụng

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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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

THÔNG BÁO LỖI