Sticky Footer สำหรับทุก Browser

ทำ Footer ให้อยู่ด้านล่างตลอดเวลาด้วย CSS

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

ยิ่งกับเว็บไซต์ที่ใช้ footer เป็นสีเข้มตัดกับพื้นหลังด้วยนะ..

สำหรับการทำให้ footer อยู่ติดกับด้านล่างของหน้าเว็บไซต์ตลอดไปโดยไม่จำเป็นต้องไป hack ความสูง ของเนื้อหานั้นก็มีหลากหลายวิธี ซึ่งแต่ละวิธีก็จะยากง่ายต่างกันไป แต่าสำหรับผู้เขียนแล้วชอบอะไรที่ไม่ซับซ้อน ต้องเป็น CSS อย่างเดียวไม่ต้องใช้ Javascript เข้าช่วย และ code ก็ต้องอ่านง่ายดู make sense พอที่จะทำด้วย

และถ้าใช้กับพวก IE8 ได้ก็จะดีขึ้นไปอีก

Sticky Footer CSS

เริ่มต้นกันด้วยการ resetCSS กันก่อน อาจจะใช้ normalize.css ก็ได้ หรือใครไม่อยากโหลด CSS อะไรจากข้างนอกหลายบรรทัดก็ให้ใช้

*{ margin: 0; padding: 0}

ตามสไตล์คนขี้เกียจ แต่สำหรับผมแล้ว.. ไม่แนะนำ

html {
  position: relative;
  min-height: 100%;
 }
 body {
  margin: 0 0 100px; // margin-bottom มีค่าเท่ากับความสูงของ footer
 }
 .footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
 }

ส่วน HTML ก็ดู clean มาก เพียงแค่ใส่ element ที่มี class ชื่อว่า “footer” เข้าไปก่อนปิด body ก็เป็นอันเรียบร้อย อย่างเช่น

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

อะไรทำนองนี้ครับ ส่วนคนที่ใช้ HTML5 เป็นทุนเดิมก็แค่เอา class ออก แล้วกำหนดเป็น “footer” แทน “.footer” ก็ได้ผลเช่นเดียวกัน ทางเลือกที่ 2 ด้านล่างนี้จะคล้ายๆ กันแต่จะเพิ่ม code เข้ามาสัก 3-4 บรรทัดเพื่อทำ fallback หาก code ด้านบนมีอะไรผิดพลาด

html, body {
  height: 100%;
 }
 .content {
  min-height: 100%;
  margin-bottom: -100px; // ค่าเท่ากับความสูงของ footer
 }
 .content:after {
  content: "";
  display: block;
 }
 .footer, .content:after {
  height: 100px;
 }
 .footer {
  background: #333;
 }

code สามารถเลือกใช้งานจริงได้ทั้งคู่ครับ เลือกเอาเลย

CR: CSS-trick
แชร์บทความนี้

    แสดงความเห็นของคุณที่นี่

    กรุณากรอกอีเมล์ของคุณก่อนส่งข้อมูล เพื่อรับการแจ้งเตือนเมื่อมีคนมาตอบข้อความของคุณ