Thuộc tính min-height

Đăng bởi: Admin

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

Thuộc tính min-height thiết lập chiều cao tối thiểu (nhỏ nhất) cho thành phần.

Cấu trúc

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

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
min-height	đơn vị	min-height: 200px;	Chiều cao tối thiểu tính từ mép trên cùng của thành phần, đơn vị có thể là px, em, %, ...
min-height	inherit	min-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 min-height:

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

div {
    border: 1px solid red;
    min-height: 180px;
}

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

Khi nội dung dài thì chiều cao của box được tăng thêm, nhưng khi nội dung ngắn thì giá trị chiều cao nhỏ nhất sẽ bằng với giá trị min-height, chiều cao lúc này không thể nhỏ hơn giá trị min-height.

Trình duyệt hỗ trợ

Thuộc tính min-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

Link liên quan

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!