Comment faire en sorte que votre pied de page colle au bas avec CSS ?

Maîtriser le positionnement du pied de page avec CSS : s'en tenir au bas

Lors de la création de pages Web, s'assurer que le pied de page reste ancré au bas de la page Le navigateur présente un défi commun. Examinons la solution, abordons votre code spécifique et explorons les techniques qui peuvent vous aider à surmonter ce dilemme.

Une approche qui échoue souvent consiste à définir la position du pied de page de manière relative. Ce positionnement relatif à lui seul est insuffisant pour maintenir le pied de page collé au bas.

Essayez plutôt d'utiliser un positionnement absolu. Voici comment procéder :

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}</code>

En définissant la position sur absolue, vous détachez le pied de page du flux normal du document. La largeur de 100 % garantit qu'il s'étend sur toute la largeur du navigateur, tandis que la propriété bottom, définie sur 0, l'ancre tout en bas.

Vous pouvez également utiliser un positionnement fixe, qui est similaire au positionnement absolu. positionnement mais maintient l'élément en place même lorsque l'utilisateur fait défiler la page. Cependant, le positionnement fixe peut ne pas être compatible avec tous les navigateurs, notamment Internet Explorer.

Dans votre code spécifique, modifiez le style du pied de page comme suit :

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

En appliquant cette modification, vous devez disposent désormais d'un pied de page qui reste solidement ancré en bas du navigateur, quelle que soit la longueur du contenu de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!