ทำ Footer ให้อยู่ด้านล่างตลอดเวลาด้วย CSS
นักพัฒนาเว็บไซต์ทั้งมือใหม่ และมือเก๋าอาจจะต้องเคยเจอปัญหาเรื่อง footer อยู่ไม่เป็นที่เป็นทาง เพราะสิ่งที่เราคาดหวังกับ footer จริงๆ คือ “อยู่ติดกับขอบเว็บไซต์ด้านล่าง” แต่ปัญหาคือมันไม่ได้เป็นอย่างนั้น ยิ่งหน้าเว็บไซต์ไหนที่เนื้อหาของเรามีปริมาณน้อย footer ก็จะเด้งขึ้นมาอยู่กลางจอบ้าง เกือบล่างบ้าง บางครั้งก็ดูไม่งามเลย
ยิ่งกับเว็บไซต์ที่ใช้ footer เป็นสีเข้มตัดกับพื้นหลังด้วยนะ..
สำหรับการทำให้ footer อยู่ติดกับด้านล่างของหน้าเว็บไซต์ตลอดไปโดยไม่จำเป็นต้องไป hack ความสูง ของเนื้อหานั้นก็มีหลากหลายวิธี ซึ่งแต่ละวิธีก็จะยากง่ายต่างกันไป แต่าสำหรับผู้เขียนแล้วชอบอะไรที่ไม่ซับซ้อน ต้องเป็น CSS อย่างเดียวไม่ต้องใช้ Javascript เข้าช่วย และ code ก็ต้องอ่านง่ายดู make sense พอที่จะทำด้วย
และถ้าใช้กับพวก IE8 ได้ก็จะดีขึ้นไปอีก
เริ่มต้นกันด้วยการ 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 สามารถเลือกใช้งานจริงได้ทั้งคู่ครับ เลือกเอาเลย