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

🕑 23 ก.พ. 2562

มาทำให้ footer อยู่ติดด้านล่างหรือ header อยู่ด้านบนของเว็บเพจตลอดเวลาด้วย css โดยใช้คำสั่ง position: fixed กันดีกว่า

ตัวอย่าง code html และ css การกำหนดให้ footer อยู่ติดด้านล่างของเว็บเพจลองก็อปปี้ code ไปลองรันดูกันได้เลย

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
<div class="footer">
  <p>Footer</p>
</div>
  </body>
</html>

มาดูความหมายของคำสั่งที่สำคัญ ๆจากตัวอย่าง code css ด้านบนกัน

position: fixed คือกำหนดไม่ให้ element อยู่กับที่ไม่เลื่อนตาม scroll
left: 0 คือ กำหนดให้อยู่ชิดซ้ายสุดของเพจ หรือตำแหน่ง pixel ที่ 0 นับจากซ้ายมือของหน้าเว็บ
bottom: 0 คือ กำหนดให้อยู่ล่างสุดของเพจ หรือตำแหน่ง pixel ที่ 0 นับจากด้านล่างหน้าเว็บ

ส่วนใครที่อยากให้ menu หรือส่วนของ header อยู่ติดด้านบนของเว็บเพจตลอดเวลาก็สามารทำได้คล้ายกับส่วนของ footer แค่ค่า code css จาก bottom : 0 เป็น top : 0; ตามตัวอย่าง code ด้านล่าง

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .footer {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
<div class="header">
  <p>header</p>
</div>
  </body>
</html>

สุดท้ายนี้ขอให้ทุกคนสนุกับการเขียนโปรแกรมน่ะครับ😍