Tạo footer cố định (Fixed/Sticky Footer) với CSS

Footer cố định (fixed footer) luôn hiển thị ở dưới cùng màn hình, không bị đẩy lên khi nội dung ngắn. Dưới đây là cách thực hiện đơn giản:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .footer {
    font-size: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(50, 6, 100);
    color: white;
    text-align: center;
  }
</style>
</head>
<body>
<h1>Fixed/Sticky Footer Example</h1>
<div class="footer">
  <p>All rights reserved ©</p>
</div>
</body>
</html>

Hai loại footer thường gặp

Loại	CSS	Hành vi
Fixed Footer	position: fixed; bottom: 0; width: 100%;	Luôn hiển thị, che nội dung khi cuộn到底
Sticky Footer (Push)	Flexbox: body {min-height:100vh; display:flex; flex-direction:column;} footer {margin-top:auto;}	Đẩy xuống dưới khi nội dung ngắn, cuộn lên khi nội dung dài

Lưu ý quan trọng

Fixed footer che khuất nội dung cuối trang. Cần thêm padding-bottom cho body hoặc container chính bằng chiều cao footer để nội dung không bị che.

body { padding-bottom: 80px; } /* Chiều cao footer */