Thuộc tính min-height trong CSS
Trần Thị Vân - 1212
- 13/07/2025
Chức năng của Thuộc tính min-height trong CSS
Thuộc tính min-height trong CSS dùng để quy định chiều cao tối thiểu của các phần tử HTML như: div, img, p, span,... , nếu nội dung trong phần tử HTML không có gì thì chiều cao nhỏ nhất vẫn là giá trị min-height.
Cú pháp của Thuộc tính min-height trong CSS
min-height: giatri;
giatri: Giá trị để quy định chiều cao tối thiểu của các phần tử HTML (Ví dụ: 300px, 50%, 80vh,....)
Ví dụ Thuộc tính min-height trong CSS
min-height:300px;
min-height:50%;
min-height:100vh;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính min-height trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div {width:19%; float:left; margin-right:1%; height:400px;border:1px solid red}
div p{width:100%; margin:0px; padding:10px; background:green; color:#fff}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính min-height trong CSS</h1>
<p>Dùng để quy định chiều cao tối thiểu của các phần tử HTML như: div, img, p, span,... , nếu nội dung trong phần tử HTML không có gì thì chiều cao nhỏ nhất vẫn là giá trị min-height:</p>
<div><p style="min-height:100px;">min-height:100px;</p></div>
<div><p style="min-height:300px;">min-height:300px;</p></div>
<div><p style="min-height:50%;">min-height:50%;</p></div>
<div><p style="min-height:100%;">min-height:100%;</p></div>
<!-- 100vh là full chiều cao của màn hình của trình duyệt-->
<div><p style="min-height:100vh;">min-height:100vh;</p></div>
</body>
</html>
Ứng dụng min-height trong thiết kế giao diện thực tế
min-height phát huy tác dụng khi một khu vực giao diện cần duy trì chiều cao tối thiểu nhưng vẫn phải cho phép nội dung mở rộng tự nhiên. Cách này phù hợp với các thẻ chứa văn bản, thẻ sản phẩm, khu vực giới thiệu hoặc những thành phần có lượng nội dung không cố định.
Tạo các khối nội dung có chiều cao đồng đều
Khi nhiều khối nằm cạnh nhau nhưng nội dung dài ngắn khác nhau, min-height giúp thiết lập một mức chiều cao tối thiểu chung. Khối ít nội dung vẫn giữ được kích thước cần thiết, trong khi khối có nhiều nội dung vẫn có thể cao hơn mà không bị cắt.
Ví dụ, có thể dùng cách này cho danh sách sản phẩm để phần mô tả ngắn không khiến các khối bị lệch chiều cao:
.product-item {
min-height: 280px;
padding: 20px;
}
Điểm quan trọng là không nên xem min-height như một chiều cao cố định. Nếu nội dung vượt qua mức 280px, phần tử vẫn có thể mở rộng. Nhờ đó bố cục ít gặp tình trạng nội dung bị chèn ép.
Kết hợp min-height với Flexbox để căn chỉnh bố cục
min-height có thể kết hợp với Flexbox khi cần tạo những khu vực có chiều cao tối thiểu và phân bổ nội dung bên trong hợp lý. Đây là cách hữu ích cho các card có phần tiêu đề, nội dung và nút hành động không đồng đều.
.card {
min-height: 320px;
display: flex;
flex-direction: column;
}
.card-button {
margin-top: auto;
}
Trong trường hợp này, các card có thể bắt đầu với cùng một chiều cao tối thiểu. Phần tử cuối được đẩy xuống cuối card nhờ Flexbox, giúp vị trí nút hành động ổn định hơn ngay cả khi nội dung phía trên có độ dài khác nhau.
Xử lý nội dung thay đổi trên màn hình responsive
Trên thiết bị có màn hình nhỏ, nội dung thường xuống nhiều dòng hơn nên chiều cao thực tế của phần tử cũng thay đổi. Vì vậy, min-height phù hợp hơn việc ép một chiều cao cố định cho những khu vực có nội dung linh hoạt.
.content-box {
min-height: 180px;
}
@media (max-width: 768px) {
.content-box {
min-height: 140px;
}
}
Cách thiết lập này cho phép giao diện giữ được khoảng không gian tối thiểu trên từng kích thước màn hình, đồng thời vẫn mở rộng khi nội dung cần thêm diện tích. Khi xây dựng giao diện responsive, nên ưu tiên min-height cho các khối có nội dung biến động thay vì đặt height cứng một cách không cần thiết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính min-height trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
