Đị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ợ
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