GORAGOD.com

การกำหนดให้ footer อยู่ติดด้านล่างของเว็บเพจตลอด

โค้ด CSS สำหรับกำหนดให้ แสดงเว็บเพจเต็มจอภาพ(ความสูง) และ แสดงส่วนของ footer อยู่ติดด้านล่างของเว็บเพจตลอด รองรับการแสดงผล ใน IE,Firefox,Opera,Chrome และ Safari
<style type="text/css">
html, body { 
   height: 100%; /* ให้ html และ body สูงเต็มจอภาพไว้ก่อน */
   margin: 0;
   padding: 0;
}
.wrapper {
   display: block;
   min-height: 100%; /* real browsers */
   height: auto !important; /* real browsers */
   height: 100%; /* IE6 bug */
   margin-bottom: -20px; /* กำหนด margin-bottom ให้ติดลบเท่ากับความสูงของ footer */
}
.footer {
   height: 20px; /* ความสูงของ footer */
   display: block;
   text-align: center;
}
</style>

ในโค้ดนี้ .warper คือพื้นที่แสดงผลทั้งหมด ยกเว้น footer ครับ หากมีการกำหนด header ให้กำหนด header ภายใน .warper
และ margin-bottom (property) ให้กำหนดค่าติดลบให้เท่ากับความสูงของ footer
จุดสำคัญของโค้ดนี้ ก็คือ เราต้องรู้ขนาดของ footer ที่ชัดเจนครับ เพื่อที่จะได้นำไปกำหนดให้กับ margin-bottom ของ .warper

สำหรับ layout ของ page แบบนี้เป็นดังนี้ครับ
<html>
<head>
</head>
<body>
<div class="wrapper">

  <div class="header"><img class="logo" src="logo.jpg" /></div>

  พื้นที่สำหรับแสดงผลเพจ รวม header

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

  พื้นที่ของ footer ให้วัดขนาดของพื้นที่นี้ หรือ กำหนดขนาดให้ชัดเจน

</div>
</body>
</html>

ตัวอย่าง