Thuộc tính min-height trong CSS

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 trong CSS 1

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

Thuộc tính min-height trong CSS