Sticky footer ไม่ใช่ fixed footer — Sticky footer คือ footer ติดด้านล่างจอ (เมื่อเนื้อหาไม่เต็มหน้า) หรือติดด้านล่างเนื้อหา (เมื่อเนื้อหาเยอะ) Fixed footer คงที่ด้านล่างจอตลอดเวลาขณะเลื่อน
Fixed Footer (ติดจอคงที่)
footer { background: black; color: white; position: fixed; bottom: 0; width: 100%; }
ใช้ position: fixed; bottom: 0 ทำให้ footer อยู่ด้านล่าง viewport ตลอด
Sticky Footer (ติดเนื้อหา/จออัจฉริยะ)
.container { min-height: 100vh; display: flex; flex-direction: column; } .page-header, .page-footer { flex-shrink: 0; } .page-body { flex-grow: 1; }
ใช้ Flexbox: container สูงอย่างน้อย 100vh, flex-direction column, header/footer flex-shrink: 0 (ไม่หด), body flex-grow: 1 (ขยายเต็มพื้นที่) — footer จะอยู่ด้านล่างเนื้อหาเสมอ
สรุป
Fixed footer ใช้ position: fixed Sticky footer ใช้ flex-grow/flex-shrink ลองแก้ค่าใน sandbox เพื่อเข้าใจรูปแบบทั้งสอง
