ปกติฟุตเตอร์ในหน้าเว็บจะอยู่ต่อจากส่วนอื่นๆ ถ้าเนื้อหาสั้นก้จะเห็นหน้าเว็บ สั้นแปลกๆ อย่างหน้าแจ้งสมัครสมาชิคสำเร็จถ้ามีข้อความแค่ สำเร็จแล้ว จะส่งเมล์ไปยืนยัน ถ้าเว็บไม่มีโฆษณา หรือภาพใหญ่ๆ ก็จะเห็นแค่ครึ่งหน้าจอ บางคนบอกว่าตลก แก้ได้โดยวางโครงสร้างตามตัวอย่างครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>CSS Fixed Footer</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #footer { position:absolute; bottom:0; width:100%; height:20px;/* Height of the footer */ background:#c00000; padding-top:5px; } #body { display:block; background:#CF6; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="body"> ใส่เนื้อหาสั้นๆ ตรงนี้นะ </div> <hr /> <div id="footer">ฟุตเตอร์นะนายจ๋า</div> </body> </html>
ถ้าเนื้อหายาว ก็จะเห็นเหมือนเว็บปกติครับ