Sticky footer khác fixed footer:
- Sticky footer: Luôn dính cuối màn hình khi nội dung không đầy trang, hoặc dính cuối nội dung khi nội dung dài hơn viewport.
- Fixed footer: Luôn cố định dưới màn hình khi cuộn trang.
Fixed Footer (position: fixed)
footer {
background: black; color: white;
position: fixed; bottom: 0; width: 100%;
}
Footer luôn hiển thị dưới viewport, che khuất nội dung khi cuộn đến cuối.
Sticky Footer (Flexbox)
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer { flex-shrink: 0; }
.page-body { flex-grow: 1; } /* Chiếm phần không gian còn lại */
Cơ chế: .container cao tối thiểu 100vh. .page-body co giãn (flex-grow:1) đẩy footer xuống dưới. Header/footer không co (flex-shrink:0).
So sánh
- Fixed: Dùng
position, footer tách khỏi luồng tài liệu (document flow). - Sticky: Dùng Flexbox, footer trong luồng tài liệu, tự thích ứng với độ dài nội dung.
Thử nghiệm trong sandbox: thay đổi nội dung, xem footer di chuyển như thế nào.
Kết luận
Sticky footer (Flexbox) thường ưu tiên cho layout hiện đại vì tự thích ứng. Fixed footer dùng cho trường hợp đặc biệt (chat widget, cookie banner...).