โค้ด CSS footer อยู่ล่างสุดของเว็บไซต์

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

ตัวอย่าง โค้ด CSS footer อยู่ล่างสุดของเว็บไซต์

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

<div id="footer">&copy; Devdit</div>

1. สร้าง id #footer กำหนดค่า position: fixed, bottom: 0px และ left: 0px โดยทั้ง 3 คำสั่งเป็นการสร้าง footer อยู่ล่างสุด ติดด้านล่างของเว็บไซต์ตลอด

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