Header / footer fissi

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 30 di 35.

Un header fisso (o un piè di pagina) rimane visibile nella parte superiore (o inferiore) della pagina mentre scorri. Questo rende la navigazione o le informazioni importanti sempre accessibili senza che l’utente debba scorrere indietro.

Si usa comunemente per:

Barre di navigazione dei siti web (intestazione fissa)
Barre «Acquista ora» o «Contattaci» (piè di pagina fisso)
App mobili in cui le azioni principali devono rimanere sullo schermo

Puoi creare un'intestazione o un piè di pagina fissi usando position: sticky o position: fixed.

Esempio (intestazione fissa)

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; /* solo per permettere lo scorrimento */
}

Sfida

Facile

Ti viene fornita una pagina HTML con un'intestazione, un piè di pagina e il contenuto principale. Il tuo compito è rendere l'intestazione e il piè di pagina fissi, in modo che rimangano sempre visibili. Il tuo compito:

Fai in modo che l'intestazione rimanga fissata nella parte superiore della pagina.
Fai in modo che il piè di pagina rimanga fissato nella parte inferiore della pagina.
Assegna all'intestazione e al piè di pagina un colore di sfondo (diverso dal bianco) e centra il testo.

L'utente dovrebbe vedere sempre l'intestazione e il piè di pagina, indipendentemente da quanto scorre.

Provalo tu

<!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>