Css Html Footer Sticky Footer

วิธีทำให้ Footer อยู่ที่ด้านล่างของหน้าเว็บ

การสร้างหน้าเว็บที่รักษาโครงสร้างให้เหมือนกันในเบราว์เซอร์ที่แตกต่างกันอาจเป็นเรื่องท้าทายอยู่บ้าง หนึ่งในปัญหาที่พัฒนาจำนวนมากพบเจอคือการทำให้ footer อยู่ที่ด้านล่างของหน้า แม้ว่าความสูงของเนื้อหาจะเปลี่ยนไป หากคุณกำลังประสบปัญหานี้ คุณมาถึงที่ที่ถูกต้องแล้ว ในโพสต์นี้เราจะพูดถึงวิธีการง่ายๆ ในการทำให้ sticky footer ที่ยึดติดอยู่ที่ด้านล่างของหน้าเว็บไซต์ของคุณ

เมื่อออกแบบเลเอาท์ง่ายๆ ที่มีสองคอลัมน์ คุณอาจพบกับสถานการณ์ที่ footer ไม่ทำงานตามที่คาดหวัง ไม่แปลกที่ footer จะลอยอยู่กลางหน้าเมื่อไม่มีเนื้อหามากพอที่จะดันมันลงไป ในทางตรงกันข้าม เมื่อมีเนื้อหามากพอ มันก็ทำงานตามที่ต้องการ — นั่นเป็นเหตุผลว่าทำไมการหาทางแก้ไขชั่วคราวหรือวิธีการทำงานรอบจึงอาจทำให้หงุดหงิด

การมี footer ที่ติดอยู่ที่ด้านล่างช่วยปรับปรุงประสบการณ์ผู้ใช้โดย:

  • ให้การเข้าถึงลิงก์ที่สำคัญได้ง่าย
  • ปรับปรุงความสวยงามโดยรวม
  • ทำให้มั่นใจถึงความสอดคล้องในขนาดหน้าจอและอุปกรณ์ที่หลากหลาย

เพื่อให้แน่ใจว่า footer ของคุณอยู่ที่ด้านล่างของหน้า เราจะใช้การผสมผสานระหว่าง CSS และ HTML ที่ง่าย ลองมาดูขั้นตอนที่จำเป็นในการบรรลุผลนี้

คู่มือทีละขั้นตอน

  1. ห่อหุ้มเนื้อหาของคุณ
    ก่อนอื่นคุณต้องสร้าง <div> สำหรับเนื้อหาหลักของคุณ ตั้งชื่อให้มันว่า wrapper

    <div class="wrapper">
    <!-- เนื้อหาของคุณไปที่นี่ -->

  2. เพิ่ม Push Div
    ก่อนปิดแท็ก </div> ของ wrapper ให้แทรก <div> ว่างเปล่าพร้อมกับคลาส push สิ่งนี้จะทำให้แน่ใจว่าสูงของ footer ได้รับการคำนวณ

    <div class="push"></div>
</div> <!-- สิ้นสุด wrapper -->

  3. แทรก Footer
    ตอนนี้ หลังจากแท็กปิดของ wrapper ให้สร้าง footer <div> และตั้งชื่อเป็น footer

    <div class="footer">
    <!-- เนื้อหาของ Footer ไปที่นี่ -->
</div>

โครงสร้าง HTML ที่สมบูรณ์

HTML ของคุณควรมีลักษณะประมาณนี้:

<div class="wrapper">
    <!-- เนื้อหาของคุณที่นี่ -->
    <div class="push"></div>
</div>
<div class="footer">
    <!-- เนื้อหาของ Footer ที่นี่ -->
</div>

สไตล์ CSS ที่ต้องการ

เพื่อให้แน่ใจว่าเลเอาท์ของคุณทำงานถูกต้อง ให้ใช้ CSS ดังต่อไปนี้:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* ขอบล่างเป็นค่าลบของความสูงของ footer */
}
.footer, .push {
    height: 142px; /* .push ต้องตรงกับความสูงของ .footer */
}

ความคิดสุดท้าย

ตามขั้นตอนที่ได้อธิบายไว้ข้างต้น คุณควรจะมี sticky footer ที่ใช้งานได้ โดยช่วยเพิ่มการใช้งานบนเว็บไซต์ของคุณ การตั้งค่านี้ทำให้มั่นใจว่าขณะที่เนื้อหาของคุณปรับเปลี่ยน footer จะทำงานตามที่คาดหวังในเบราว์เซอร์ที่แตกต่างกัน

อย่าลืมทดสอบการออกแบบของคุณในเบราว์เซอร์ต่างๆ เพื่อรับประกันพฤติกรรมที่สอดคล้องกัน ด้วยการนำวิธีแก้นี้ไปใช้ คุณสามารถป้องกันปัญหาเลย์เอาต์ที่ไม่ต้องการและเสนอให้ผู้เข้าชมของคุณได้พบกับรูปลักษณ์ที่มีเสน่ห์และเป็นมืออาชีพ

หากคุณสนุกกับคู่มือนี้หรือมีคำถาม กรุณาแสดงความคิดเห็นด้านล่าง! ขอให้คุณมีความสุขกับการเขียนโค้ด!