Cách thiết lập chiều cao tối thiểu (min-height) của phần tử với JavaScript

Thuộc tính minHeight (CSS min-height) đặt giới hạn dưới cho chiều cao phần tử. Phần tử sẽ không thấp hơn giá trị này, nhưng có thể cao hơn nếu nội dung nhiều.

Ví dụ minh họa

Container có overflow: auto. Nhấn nút đặt min-height 400px – thanh cuộn xuất hiện nếu nội dung ít:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 300px;
      background-color: gray;
      overflow: auto;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để đặt chiều cao tối thiểu.</p>
  <button type="button" onclick="display()">Min Height</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.minHeight = "400px";
    }
  </script>
</body>
</html>

Mối quan hệ height / min-height / max-height

Quy tắc: min-height > height > max-height

/* Kết quả thực tế */
height: 200px;
min-height: 300px;
max-height: 500px;
/* → height thực tế = 300px (min-height thắng) */

Ứng dụng phổ biến

• Hero section: min-height: 100vh đầy màn hình.
• Sticky footer: container min-height: calc(100vh - footerHeight).
• Modal/dialog: min-height: 200px tránh quá扁.