Gabarit 03

Largeur fixe, conteneur global centré, avec hauteur minimale de 100% de la fenêtre du navigateur

Cliquez ici pour replier le contenu principal

À propos du gabarit 03

Code HTML et CSS

Ce gabarit est structuré de la manière suivante:

<body>
	<header id="entete">...</header>
	<nav id="navigation">...</nav>
	<main id="contenu">...</main>
	<footer id="pied">...</footer>
</body>

Il est mis en forme par deux feuilles de styles:

  1. base.css (mise en forme minimale du texte, commune à tous les gabarits)
  2. modele03.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à consulter.

Pour voir le détail du code HTML de cette page, utilisez la fonction d'affichage de la source de votre navigateur web (ex: «Affichage > Code source de la page»).

À noter

  1. Le conteneur global (body) a une largeur fixe de 760px. Il est centré grâce aux marges automatiques (margin-inline: auto).

  2. Le conteneur global prend au minimum toute la hauteur de la fenêtre grâce à la propriété min-height, avec la valeur 100dvh.

  3. Attention: il ne faut pas donner de marge verticale à ce conteneur (body), car elle se rajouterait à la hauteur de l'élément et provoquerait l'apparition d'une barre de défilement, même quand il n'y a aucun contenu à faire défiler.

    Pour la même raison, il faut éviter la fusion des marges entre body et ses éléments enfants.