জাভাস্ক্রিপ্টে একটি এলিমেন্টের ন্যূনতম উচ্চতা সেট করা

এলিমেন্টের ন্যূনতম উচ্চতা সেট করতে জাভাস্ক্রিপ্টে minHeight প্রপার্টিটি ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          #box {             width: 300px;             background-color: gray;             overflow: auto;          }       </style>    </head>    <body>       <p>নিচে ক্লিক করুন ন্যূনতম উচ্চতা সেট করতে।</p>       <button type="button" onclick="display()">ন্যূনতম উচ্চতা</button>       <div id="box">          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>       </div>       <br>       <script>          function display() {             document.getElementById("box").style.minHeight = "400px";          }       </script>    </body> </html>

ব্যাখ্যা: min-height এলিমেন্টটি নির্দিষ্ট উচ্চতার নিচে যেতে দেয় না। কন্টেন্ট বেশি হলে এলিমেন্ট বড় হবে (ডিফল্ট আচরণ), কিন্তু কম হলে ন্যূনতম উচ্চতা বজায় থাকবে। উদাহরণে overflow: auto দেওয়া আছে, ফলে কন্টেন্ট বেশি হলে স্ক্রолবার আসবে। height: auto (ডিফল্ট) + min-height = ফ্লেক্সIBLE কন্টেইনারের জন্য আদর্শ।