การกำหนดให้ 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>

ตัวอย่าง