Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-01 07:55:02
original
265 Les gens l'ont consulté

How to Make Your Footer Stick to the Bottom with 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal