การจัดวางส่วนท้ายและแถบด้านข้างแบบติดตำแหน่ง

ส่วนท้ายแบบติดตรึงจะอยู่ด้านล่างของพื้นที่แสดงผลเมื่อเนื้อหาสั้น แต่จะเลื่อนลงตามเนื้อหาเมื่อเนื้อหายาว ความท้าทายในอดีตคือการทำให้ส่วนท้ายติดอยู่โดยไม่ทราบความสูงของเนื้อหาหรือใช้ JavaScript

วิธีแก้ปัญหาสมัยใหม่ที่เรียบง่ายที่สุดคือ body { display: flex; flex-direction: column; min-height: 100vh; } และ main { flex: 1; } เนื้อหาหลักจะขยายเพื่อเติมพื้นที่ว่างที่มีอยู่ ทำให้ส่วนท้ายอยู่ด้านล่างไม่ว่าเนื้อหาจะยาวเท่าใด

ทางเลือกด้วย CSS Grid คือ body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } ส่วนหัวมีความสูงอัตโนมัติ ส่วนเนื้อหาหลักได้ค่า 1fr (เติมพื้นที่ที่เหลือ) และส่วนท้ายมีความสูงอัตโนมัติ วิธีนี้สะอาดและชัดเจน เพราะแม่แบบแถวแสดงเจตนาของเค้าโครงได้อย่างชัดเจน

position: sticky; bottom: 0 ที่ส่วนท้ายจะยึดส่วนท้ายไว้กับด้านล่างของพื้นที่แสดงผลขณะเลื่อน แต่จะทำงานก็ต่อเมื่อบริบทการเลื่อนอนุญาต วิธีนี้เหมาะกับส่วนท้ายภายในคอนเทนเนอร์ที่เลื่อนได้ แต่เหมาะสมน้อยกว่าส่วนท้ายระดับหน้า ซึ่งเฟล็กซ์บ็อกซ์หรือกริดมีโครงสร้างสะอาดกว่า

เค้าโครงที่มีแถบด้านข้างและเนื้อหาหลักประกอบด้วย wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; } และ main { flex: 1; min-width: 0; } การกำหนด min-width: 0 ให้ main จะป้องกันไม่ให้รายการเฟล็กซ์ล้นคอนเทนเนอร์เมื่อมีเนื้อหาที่กว้าง

แถบด้านข้างแบบกริดใช้ wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); } คอลัมน์ของแถบด้านข้างมีความกว้างคงที่ ส่วนคอลัมน์เนื้อหาจะเติมพื้นที่ที่เหลือ หากต้องการเพิ่มแถวส่วนหัว ให้ใช้ grid-template-rows: auto 1fr โดยให้แถบด้านข้างครอบคลุมทั้งสองแถว

บนอุปกรณ์เคลื่อนที่ ให้ยุบแถบด้านข้างไว้เหนือหรือใต้เนื้อหาหลัก โดยใช้มีเดียคิวรีเปลี่ยนจากเค้าโครงคอลัมน์แบบกริดเป็นการเรียงซ้อนคอลัมน์เดียว หรือใช้ grid-template-columns: min(280px, 30%) 1fr เพื่อสร้างแถบด้านข้างแบบยืดหยุ่นที่หดลงบนพื้นที่แสดงผลขนาดเล็ก

ทำให้แถบด้านข้างเลื่อนได้อย่างอิสระด้วย sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } แถบด้านข้างจะยังอยู่ในมุมมองขณะที่เนื้อหาหลักเลื่อน เหมาะสำหรับแถบนำทางหรือแถบสารบัญบนหน้าที่มีเนื้อหายาว

แถบด้านข้างแบบยุบได้จะสลับระหว่างสถานะเต็มความกว้างกับสถานะที่แสดงเฉพาะไอคอน ใช้คุณสมบัติกำหนดเองของ CSS สำหรับความกว้างแถบด้านข้างด้วย --sidebar-width: 280px บนตัวครอบ แล้วสลับเป็น 64px ผ่านคลาส การเปลี่ยนแปลงจะทำให้การเปลี่ยนความกว้างเคลื่อนไหวอย่างราบรื่น

แถบด้านข้างที่ใช้ตำแหน่งคงที่ (position: fixed; left: 0; top: 0; height: 100vh) จำเป็นต้องชดเชยเนื้อหาหลักด้วยความกว้างของแถบด้านข้าง: main { margin-left: 280px } บนอุปกรณ์เคลื่อนที่ แถบด้านข้างจะเลื่อนทับเนื้อหา พร้อมปุ่มปิดและพื้นหลังซ้อนทับ

กำกับแถบนำทางด้านข้างด้วย <nav> และ aria-label="Sidebar navigation" แถบด้านข้างแบบยุบได้ต้องมีปุ่มสลับที่เข้าถึงได้ พร้อม aria-expanded และ aria-controls ลิงก์ข้ามช่วยให้ผู้ใช้แป้นพิมพ์ข้ามแถบด้านข้างเพื่อไปยังเนื้อหาหลักได้

เหตุใดจึงต้องกำหนดความกว้างขั้นต่ำเป็น 0 ให้รายการเฟล็กซ์ของเนื้อหาหลักในเค้าโครงแถบด้านข้าง

เฟล็กซ์บ็อกซ์ที่กำหนด flex: 1 ให้ main หรือกริดสามแถว ช่วยสร้างส่วนท้ายแบบติดตรึงได้อย่างสะอาดด้วย CSS เพียงเล็กน้อย เค้าโครงแถบด้านข้างใช้การกำหนดคอลัมน์แบบคงที่หรือแบบยืดหยุ่น พร้อมจุดเปลี่ยนที่ปรับให้ยุบลงบนอุปกรณ์เคลื่อนที่ แถบด้านข้างแบบติดตรึง ความกว้างที่ยุบได้ และแอตทริบิวต์ ARIA ที่เข้าถึงได้ ช่วยให้รูปแบบแถบด้านข้างและส่วนท้ายพร้อมใช้งานจริงอย่างสมบูรณ์