Gabarit 03

Caractéristiques: largeur fixe 750px, conteneur global centré, avec hauteur minimale de 100% de la fenêtre du navigateur.

Spécial: pour faire disparaitre le contenu (et ainsi vérifier le rendu de la page avec un contenu court).

À propos du gabarit 03

Code HTML et CSS

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

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

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 (div#global) a une largeur fixe de 750px. Il est centré grâce aux marges automatiques (margin-left: auto et margin-right: 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 100%.

    La petite subtilité ici est que pour que le min-height: 100% soit pris en compte, l'élément parent (body) doit lui-même avoir une hauteur déterminée. Et cela vaut également pour le parent de body, c'est à dire l'élément html (appelé aussi élément racine du document). On écrit donc:

    html, body {
	height: 100%;
}
#global {
	min-height: 100%;
}

  3. Attention: il ne faut pas donner de marge, padding ou bordure verticales aux éléments html, body et div#global. En effet, ils se rajouteraient à la hauteur de l'élément, or le moindre pixel en plus des 100% de hauteur provoquerait l'apparition d'une barre de défilement, même s'il n'y a aucun contenu à faire défiler.

    Pour la même raison, il faut éviter la fusion des marges entre div#global et ses éléments enfants. Dans ce gabarit, on utilise overflow: hidden sur div#global dans ce but.