তিনটি প্রভাবশালী পদ্ধতি
১. Relative Height (HTML + Body 100%) — ক্লাসিক
#main {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
overflow: auto; /* কন্টেন্ট বড় হলে স্ক্রোল */
}
ভিউপোর্টের সাথে আঁকা থাকে, স্ক্রোল করে না (মডাল, সাইডবার, ফুল-স্ক্রিন সেকশনের জন্য)।
৩. Viewport Units (আধুনিক, সবচেয়ে সহজ)
/* CSS Custom Property (JS আপডেটেড) */
:root { --vh: 1vh; }
.full-height { height: calc(100 * var(--vh)); }
<script>
// লোড এবং রিসাইজে আপডেট
function setVH() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
window.addEventListener('resize', setVH);
window.addEventListener('orientationchange', setVH);
setVH();
</script>
Flexbox/Grid লেআউটে ফুল হাইট
