CSS min-height: Đặt chiều cao tối thiểu cho phần tử

Chúng ta có thể định nghĩa một min-height cố định cho hộp nội dung (content box) của một phần tử bằng thuộc tính CSS min-height, thuộc tính này không cho phép hộp nội dung của phần tử nhỏ hơn giá trị này, ngay cả khi chiều cao thực tế nhỏ hơn min-height.

Cú pháp

selector {
    min-height: /* giá trị */;
}

Giá trị có thể là: px, em, rem, %, vh, auto (mặc định).

Ví dụ 1: Thay đổi min-height bằng JavaScript

<!DOCTYPE html>
<html>
<head>
<title>CSS min-height Property</title>
<style>
* { padding: 2px; margin: 5px; }
button { border-radius: 10px; }
#containerDiv {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
    border-radius: 10px;
}
#contentDiv {
    min-height: 150px;
    background: white;
    padding: 10px;
}
</style>
</head>
<body>
<div id="containerDiv">
<div id="contentDiv">
Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
function add() {
    document.querySelector('#contentDiv').style.minHeight = "100px";
}
</script>
</body>
</html>

Ví dụ 2: So sánh hai div với min-height

<!DOCTYPE html>
<html>
<head>
<title>CSS min-height Property</title>
<style>
* { padding: 2px; margin: 5px; }
button { border-radius: 10px; }
#containerDiv {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
    border-radius: 10px;
}
#contentDiv1, #contentDiv2 {
    width: 50%;
    border: 2px solid black;
    margin: 0 auto;
    background: white;
    padding: 10px;
}
</style>
</head>
<body>
<div id="containerDiv">
<div id="contentDiv1">
Đoạn văn 1 - nội dung ngắn.
</div>
<div id="contentDiv2">
Đoạn văn 2 - nội dung dài hơn. Đoạn văn 2 - nội dung dài hơn. Đoạn văn 2 - nội dung dài hơn.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
function add() {
    document.querySelector('#contentDiv1').style.minHeight = "95px";
}
</script>
</body>
</html>

Lưu ý quan trọng

• min-height ghi đè height nếu height < min-height
• max-height ghi đè min-height nếu min-height > max-height
• Phần tử con với height: 100% cần parent có chiều cao xác định
• Khác với height, min-height cho phép phần tử mở rộng nếu nội dung lớn hơn