การกำหนดให้ footer อยู่ติดด้านล่างของเว็บเพจตลอด
<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>ตัวอย่าง