Thuộc tính min-height

Thuộc tính min-height thiết lập chiều cao tối thiểu của phần tử. Giá trị của thuộc tính là bất kỳ đơn vị đo kích thước nào hoặc từ khóa none, biểu thị không có giá trị.

Thường được đặt cho phần tử có chiều rộng linh hoạt (chiều cao được đặt theo phần trăm hoặc không được đặt gì cả, và phần tử tự mở rộng chiều cao dựa vào nội dung bên trong).

Nếu chiều cao tối thiểu được đặt - thì phần tử không thể nhỏ hơn chiều cao này. Nếu văn bản ít hơn so với yêu cầu cho min-height, phần tử sẽ có chiều cao bằng min-height.

Nếu văn bản nhiều hơn - chiều cao của phần tử sẽ được tính toán tùy thuộc vào lượng văn bản.

Cú pháp

bộ chọn {
	min-height: giá trị;
}

Ví dụ

Trong ví dụ này chiều cao hoàn toàn không được đặt và sẽ được trình duyệt tự động tính toán tùy thuộc vào lượng văn bản. Tuy nhiên, vì thuộc tính min-height đã được đặt, nên chiều cao sẽ không giảm xuống dưới giá trị này, ngay cả khi trong nó không có văn bản:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

Ví dụ

Hãy thêm vào phần tử nhiều văn bản hơn - để xảy ra tràn khối theo chiều cao. Trong trường hợp này khối của chúng ta sẽ đơn giản tăng chiều cao của nó lên:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Ví dụ

Để so sánh, hãy xem điều gì sẽ xảy ra với khối nếu chúng ta bỏ chiều cao tối thiểu, và thay vào đó đặt thuộc tính height:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

Xem thêm

thuộc tính max-height,
thiết lập chiều cao tối đa của phần tử
thuộc tính max-width,
thiết lập chiều rộng tối đa của phần tử
thuộc tính min-width,
thiết lập chiều rộng tối thiểu của phần tử