Maison  >  Article  >  interface Web  >  Comment faire en sorte qu'un pied de page adhère au bas du navigateur à l'aide de CSS ?

Comment faire en sorte qu'un pied de page adhère au bas du navigateur à l'aide de CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 16:37:30322parcourir

How to Make a Footer Stick to the Bottom of the Browser Using CSS?

Comment apposer un pied de page en bas du navigateur à l'aide de CSS

Lorsque vous rencontrez des difficultés pour positionner un pied de page en bas du navigateur, un obstacle courant est son apparition persistante au milieu de la fenêtre. Pour résoudre ce problème, vous pouvez utiliser ces styles CSS :

  • Déterminez la structure HTML :
<code class="HTML"><form>
...
<div class="Main" />
<div id="Footer" />
</form></code>
  • Définissez le CSS associé :
<code class="CSS">* {
    margin: 0;
}

html, body {
    height: 100%;
}

#Footer {
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 4em;
}

.Main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    margin: 0 25% -4em 25%;

    font-family: Verdana, Arial, Tahoma, Times New Roman;
    font-size: 0.8em;
    word-spacing: 1px;
    line-height: 170%;
}</code>

Ces styles spécifient la position du pied de page comme absolue et celle du bas comme 0, garantissant qu'il reste apposé en bas du navigateur.

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!

Déclaration:
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