`height: 100%` html এবং body-এ সেট করে এবং চাইল্ড ডিভেও `height: 100%` দিয়ে ব্রাউজার উইন্ডোর পুরো উচ্চতা কভার করা যায়।
উদাহরণ: ফুল হাইট এলিমেন্ট
<!DOCTYPE html>
<html>
<head>
<title>পেজ টাইটেল</title>
<style>
*{ box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white; font-size: 40px; padding: 40px;
}
</style>
</head>
<body>
<div class="fullHeight">এই ডিভ এলিমেন্টটি উইন্ডোর পুরো উচ্চতা ও প্রস্থে ফেলবে</div>
</body>
</html>
কোড ব্যাখ্যা
- html, body { height: 100%; margin: 0; }: রুট এলিমেন্টগুলো ফুল ভিউপোর্ট উচ্চতা নেয়।
- .fullHeight { height: 100%; }: চাইল্ডও প্যারেন্টের ১০০% উচ্চতা নেয়।
- box-sizing: border-box: প্যাডিং 포함한 মোট উচ্চতা ১০০% থাকে।
আধুনিক বিকল্প
`height: 100vh` (ভিউপোর্ট হাইট) বা `min-height: 100vh` ব্যবহার করলে html/body-এ height:100% দরকার নয়।
