Đầu trang / chân trang cố định

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 30 trên 35.

Tiêu đề cố định (hoặc chân trang cố định) luôn hiển thị ở đầu (hoặc cuối) trang khi bạn cuộn. Nhờ vậy, bạn luôn có thể truy cập thanh điều hướng hoặc thông tin quan trọng mà không cần cuộn ngược lại.

Nó thường được dùng cho:

Thanh điều hướng trên trang web (đầu trang cố định)
Thanh “Mua ngay” hoặc “Liên hệ” (chân trang cố định)
Ứng dụng di động cần giữ các thao tác chính luôn hiển thị trên màn hình

Bạn có thể tạo đầu trang hoặc chân trang cố định bằng position: sticky hoặc position: fixed.

Ví dụ (tiêu đề cố định)

HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <p>Lots of content here...</p>
  <p>Keep scrolling down to see the header stay in place.</p>
</main>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  position: sticky;
  top: 0;
}

main {
  padding: 2rem;
  height: 2000px; /* chỉ để tạo vùng cuộn */
}

Thử thách

Dễ

Bạn được cung cấp một trang HTML có phần đầu trang, chân trang và nội dung chính. Nhiệm vụ của bạn là cố định phần đầu trang và chân trang để chúng luôn hiển thị. Nhiệm vụ của bạn:

Cố định phần đầu trang ở đầu trang.
Cố định chân trang ở cuối trang.
Đặt màu nền không phải màu trắng cho phần đầu trang và chân trang, đồng thời căn giữa văn bản.

Người dùng luôn phải nhìn thấy phần đầu trang và chân trang, dù họ cuộn trang đến đâu.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Header / Footer</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.6;
      background-color: #f4f4f4;
    }

    header {
      z-index: 100;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    footer {
      margin-top: auto;
      z-index: 100;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
    }

    main {
      flex: 1;
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h1, h2 {
      color: #333;
    }

    h2 {
      margin-top: 1.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Secrets of Longevity</h1>
  </header>

  <main>
    <h2>What Are Blue Zones?</h2>
    <p>Blue Zones are regions of the world where people live much longer than average. Researchers identified several key areas, including Okinawa (Japan), Sardinia (Italy), Nicoya (Costa Rica), Ikaria (Greece), and Loma Linda (California, USA).</p>

    <h2>Common Habits of Long-Lived People</h2>
    <p>People in Blue Zones often share similar lifestyle habits that contribute to longevity:</p>
    <ul>
      <li>Plant-based diets rich in vegetables, beans, and whole grains.</li>
      <li>Regular physical activity integrated into daily life, like walking or gardening.</li>
      <li>Strong social connections and family support.</li>
      <li>Stress reduction through meditation, prayer, or relaxation rituals.</li>
      <li>Having a sense of purpose, which motivates daily life.</li>
    </ul>

    <h2>Why Longevity Matters</h2>
    <p>Studying Blue Zones helps us understand how lifestyle, diet, and community can increase lifespan and improve quality of life. Adopting even a few of these habits can lead to a healthier, happier life.</p>

    <p>Remember, longevity isn’t just about living longer — it’s about living well.</p>
  </main>

  <footer>
    <p>&copy; 2025 Longevity Insights</p>
  </footer>

</body>
</html>