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

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

উদাহরণ

<!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.maxHeight = "70px";    } </script> </body> </html>

ব্যাখ্যা: max-height এলিমেন্টটি নির্দিষ্ট উচ্চতার বেশি বড় হওয়া থেকে বাধা দেয়। কন্টেন্ট বেশি হলে overflow: auto/scroll/hidden ব্যবহার করে হ্যান্ডেল করতে হয়। উদাহরণে maxHeight = "70px" সেট করা হয়েছে, ফলে কন্টেন্ট ৭০পিক্সেলের বেশি হলে স্ক্রলবার আসবে (কারণ overflow: auto আছে)। এটি মডাল, ড্রপডাউন, টুলটিপের জন্য খুব কাজের।