Thuộc tính max-height trong CSS
Trần Thị Vân - 1214
- 14/07/2025
Chức năng của Thuộc tính max-height trong CSS
Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.
Cú pháp của Thuộc tính max-height trong CSS
max-height: giatri;
giatri: Giá trị để giới hạn chiều cao lớn nhất của phần tử HTML (Ví dụ: 100px, 50%, 100vh,....)
Ví dụ Thuộc tính max-height trong CSS
max-height:150px;
max-height:50%;
max-height:100vh;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính max-height trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.divclass{width:19%; float:left; height:360px; border:1px solid red; margin-right:1%}
.divclass2{width:100%; margin:0px; padding:10px; background:green;overflow: hidden;color:#fff; }
h4{margin:0px; padding:0px;margin-bottom:10px}
.divclass2 p{margin:0px; padding:0px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính max-height trong CSS</h1>
<p>Dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể:</p>
<div class="divclass">
<div class="divclass2" style="max-height:150px">
<h4>max-height:150px</h4>
<p>Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,...</p>
</div>
</div>
<div class="divclass">
<div class="divclass2" style="max-height:200px">
<h4>max-height:200px</h4>
<p>Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.</p>
</div>
</div>
<div class="divclass">
<div class="divclass2" style="max-height:50%">
<h4>max-height:50%</h4>
<p>Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.</p>
</div>
</div>
<div class="divclass">
<div class="divclass2" style="max-height:100%">
<h4>max-height:100%</h4>
<p>Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.</p>
</div>
</div>
<div class="divclass">
<div class="divclass2" style="max-height:100vh">
<h4>max-height:100vh</h4>
<p>Thuộc tính max-height trong CSS dùng để giới hạn chiều cao lớn nhất của phần tử HTML như: div, p, img,... thuộc tính max-height thường để cho chiều cao của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.</p>
</div>
</div>
</body>
</html>
Cách sử dụng max-height hiệu quả trong CSS
max-height phát huy hiệu quả khi bạn muốn giới hạn chiều cao tối đa nhưng vẫn cho phép phần tử co giãn theo nội dung. Khi kết hợp đúng với các thuộc tính liên quan, cách bố trí sẽ linh hoạt hơn và hạn chế tình trạng nội dung bị tràn hoặc phá vỡ giao diện.
max-height kết hợp với overflow để xử lý nội dung dài
Khi nội dung có thể thay đổi theo từng trường hợp, bạn có thể đặt giới hạn chiều cao bằng max-height rồi dùng overflow để quyết định phần nội dung vượt quá giới hạn sẽ được xử lý như thế nào.
.content {
max-height: 300px;
overflow: auto;
}
Với cách này, phần tử chỉ mở rộng đến 300px. Nếu nội dung dài hơn, trình duyệt sẽ tạo vùng cuộn thay vì làm chiều cao phần tử tăng liên tục. Đây là cách phù hợp cho các khu vực như danh sách, hộp thông báo hoặc phần mô tả có lượng nội dung không cố định.
Sử dụng max-height cho hình ảnh và khung nội dung
Đối với hình ảnh, max-height giúp giới hạn chiều cao mà không bắt buộc mọi ảnh phải có cùng một kích thước cố định. Kết hợp với width: auto, ảnh có thể giữ nguyên tỷ lệ hiển thị.
img {
max-height: 400px;
width: auto;
}
Cách này hữu ích khi website phải hiển thị nhiều hình ảnh có tỷ lệ khác nhau nhưng vẫn cần kiểm soát chiều cao tối đa để giao diện không bị chiếm quá nhiều không gian.
Khi nào nên dùng max-height thay cho height
Nên ưu tiên max-height khi chiều cao thực tế của nội dung chưa cố định và bạn chỉ muốn đặt ra một giới hạn. Ngược lại, height phù hợp hơn khi phần tử bắt buộc phải có một chiều cao cụ thể.
Ví dụ, một hộp nội dung có thể ngắn hoặc dài tùy dữ liệu thì max-height giúp hộp tự co theo nội dung cho đến giới hạn đã đặt. Điều này thường linh hoạt hơn việc ép mọi trường hợp vào một chiều cao cố định.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính max-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 *
