เทคนิคการจัดวางทั่วไปที่เรียกว่าส่วนท้ายแบบติดหนึบเป็นสิ่งที่ท้าทายที่จะทำในอดีตกับ CSS รุ่นเก่า แต่ตอนนี้เป็นวิธีสร้างส่วนท้ายแบบติดหนึบด้วย CSS ส่วนท้ายแบบติดหนึบคือส่วนท้ายที่คงที่และมองเห็นได้ที่ด้านล่างของหน้าจอ ไม่ว่าผู้ใช้จะเลื่อนหน้าลงมาไกลแค่ไหน ตามทฤษฎีแล้ว ตำแหน่งของส่วนท้ายแบบติดหนึบไม่ควรเปลี่ยนแปลงและควรปรากฏบนหน้าจอของผู้ใช้เสมอ
การสร้างส่วนท้ายแบบติดหนึบโดยใช้ CSS นั้นค่อนข้างง่าย ส่วนใหญ่จะตั้งค่าคุณสมบัติตำแหน่งของส่วนท้ายเป็นคงที่ ดูโค้ดด้านล่างเพื่อดูวิธีการดำเนินการ ในตัวอย่างนี้ ID ของส่วนท้ายคือ #sticky-footer
ส่วนท้ายแบบติดหนึบคือส่วนท้ายของหน้าเว็บ ซึ่งจะติดกับด้านล่างของวิวพอร์ตเมื่อเนื้อหาสั้นกว่าวิวพอร์ต ความสูง. ซึ่งช่วยให้เรานำทางเว็บไซต์ได้อย่างง่ายดายและสามารถสร้างได้ด้วย CSS
สร้าง HTML
องค์ประกอบที่มีชื่อคลาสต่อไปนี้:”content”และ”push”เพิ่มองค์ประกอบด้วยชื่อคลาส”ส่วนท้าย”
เพิ่ม CSS
ระบุคุณสมบัติความสูงและระยะขอบสำหรับองค์ประกอบ และ เพิ่มคุณสมบัติการเติม ความสูงขั้นต่ำ และระยะขอบให้กับคลาส”เนื้อหา”ตั้งค่าคุณสมบัติความสูงเท่ากับระยะขอบลบ
ส่วนท้ายแบบติดหนึบคืออะไร
ส่วนท้ายคือข้อมูลที่ด้านล่างของหน้าเว็บ ในเว็บไซต์แบบเดิม ผู้เข้าชมจะเลื่อนลงเพื่อดูข้อมูลในส่วนท้ายที่ด้านล่างสุดของหน้าเว็บ แต่ด้วยส่วนท้ายแบบติดหนึบ (หรือที่เรียกว่าส่วนท้ายคงที่) ข้อมูลนั้นจะปรากฏที่ด้านล่างสุดของเว็บเบราว์เซอร์ของผู้เข้าชมเสมอ แม้ว่าผู้เข้าชมจะเลื่อนลงมาก็ตาม คุณไม่จำเป็นต้องไปที่ด้านล่างของหน้าเพื่อดู
ตัวอย่างเช่น ทีมงานเคาน์เตอร์จองห้องพักพบว่าการแสดงหมายเลขโทรศัพท์ของศูนย์ติดต่ออย่างชัดเจนบนเว็บไซต์ช่วยเพิ่มคำสั่งซื้อ ดังนั้นพวกเขาจึงทำให้แน่ใจว่า มันถูกแสดงในส่วนท้ายแบบติดหนึบสำหรับผู้เข้าชมบนมือถือ
รูปภาพด้านล่างมาจากบทความ “กรณีศึกษาการเพิ่มอัตราการแปลง: วิธีที่ไซต์ท่องเที่ยวเพิ่มอัตราการแปลงเว็บไซต์เป็นสองเท่าในหนึ่งปี” ซึ่งชี้ให้เห็นว่า หมายเลขโทรศัพท์แสดงอยู่ในไซต์มือถือ หมายเลขโทรศัพท์ที่ด้านล่างของหน้าแสดงอยู่ในส่วนท้ายแบบติดหนึบ
คำถามที่พบบ่อย
CSS ส่วนท้ายแบบติดหนึบคืออะไร
รูปแบบส่วนท้ายแบบติดหนึบคือรูปแบบหนึ่ง โดยที่ส่วนท้ายของหน้าของคุณ”ติด”ที่ด้านล่างของวิวพอร์ตในกรณีที่เนื้อหาสั้นกว่าความสูงของวิวพอร์ต
ฉันจะทำให้ส่วนท้ายแตะที่ด้านล่างของหน้าใน CSS ได้อย่างไร
คุณสามารถใช้ flexbox เพื่อให้แน่ใจว่าส่วนท้ายอยู่ที่ด้านล่างสุดของหน้าเสมอ สิ่งนี้ทำได้โดยการตั้งค่าองค์ประกอบร่างกาย min-height: 100vh , display: flex และ flex-direction: คอลัมน์
ส่วนท้ายแบบติดหนึบเหมือนกับส่วนท้ายแบบคงที่หรือไม่
บน a เว็บไซต์แบบเดิม ผู้เข้าชมจะเลื่อนลงมาเพื่อดูข้อมูลที่ด้านล่างของหน้าเว็บในส่วนท้าย อย่างไรก็ตาม ด้วยส่วนท้ายแบบติดหนึบ (บางครั้งเรียกว่าส่วนท้ายแบบตายตัว) ข้อมูลจะแสดงที่ด้านล่างสุดของเว็บเบราว์เซอร์ของผู้เข้าชมเสมอเมื่อผู้เข้าชมเลื่อนลง