Sticky footer এবং fixed footer এক নয়। Sticky footer: কন্টেন্ট কম থাকলে স্ক্রিনের নিচে থাকে, কন্টেন্ট বেশি থাকলে কন্টেন্টের নিচে থাকে। Fixed footer: স্ক্রোল করলেও স্ক্রিনের নিচে আটকে থাকে।
Fixed Footer উদাহরণ
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
Sticky Footer উদাহরণ (Flexbox ব্যবহার করে)
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
.page-body {
background: blue;
flex-grow: 1; /* বাকি স্পেস নেবে */
}
.page-footer {
background: black;
color: white;
}
পার্থক্য বিশ্লেষণ
- Fixed Footer: position: fixed ব্যবহার করে ভিউপোর্টের নিচে আটকে থাকে।
- Sticky Footer: Flexbox-এর flex-grow: 1 (বডি) এবং flex-shrink: 0 (হেডার/ফুটার) ব্যবহার করে কন্টেন্টের নিচে বা ভিউপোর্টের নিচে থাকা নিশ্চিত করে।
উপসংহার
Sticky footer আধুনিক এবং রেসপন্সিভ। Flexbox ব্যবহার করে এটি বাস্তবায়ন করা সহজ এবং কার্যকর। কোড এডিটরে পরীক্ষা করে পার্থক্য বোঝা যাবে।
