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

สอนวิธีการกำหนดให้ footer อยู่ติดด้านล่างของเว็บเพจตลอด โดยใช้ภาษา CSS ได้แก่คำสั่ง position กำหนดค่าเป็น fixed และกำหนดตำแหน่ง คือ bottom = 0 และ left = 0 ทำให้ footer อยู่ติดด้านล่างของเว็บเพจตลอด สามารถเขียนโปรแกรมได้ดังนี้

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

<style>
    #footer {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 10px;
        text-align: center;
        width: 100%;
        color: #FFFFFF;
        background-color: #3391E4;
    }
</style>

<div id="footer">ข้อความนี้เป็นส่วน Footer อยู่ติดด้านล่างของเว็บเพจตลอด</div>

1. ใน #footer ของ css กำหนด position: fixed เพื่อให้ element ดังกล่าวอยู่ตำแหน่งนั้นตลอด และกำหนดค่า bottom และ left เท่ากับ 0 เพื่อให้เป็นตำแหน่งของด้านล่างเว็บเพจ หรือ footer

2. ใน HTML นำ #footer ไปใช้งานกับ div เพื่แสดงผลลัพธ์ออกสู่หน้าจอ